How do I create an HTML table with a fixed/frozen left column and a scrollable body?
I need a simple solution. I know it\'s similar to some other questions, like:
- HTML table with fixed headers and a fixed column?
- How can I lock the fir
-
For most browsers released after 2017:
You can use the
position: sticky. See https://caniuse.com/#feat=css-sticky.There is no need for a fixed width column.
Run the code snippet below to see how it works.
.tscroll { width: 400px; overflow-x: scroll; margin-bottom: 10px; border: solid black 1px; } .tscroll table td:first-child { position: sticky; left: 0; background-color: #ffffd; } .tscroll td, .tscroll th { border-bottom: dashed #888 1px; }Heading 1 Heading 2 Heading 3 9:00 AAA BBB CCC DDD EEE FFF GGG HHH III JJJ KKK LLL MMM NNN OOO PPP QQQ 10:00 AAA BBB CCC DDD EEE FFF GGG HHH III JJJ KKK LLL MMM NNN OOO PPP QQQ 11:00 AAA BBB CCC DDD EEE FFF GGG HHH III JJJ KKK LLL MMM NNN OOO PPP QQQ 12:00 AAA BBB CCC DDD EEE FFF GGG HHH III JJJ KKK LLL MMM NNN OOO PPP QQQ 13:00 AAA BBB CCC DDD EEE FFF GGG HHH III JJJ KKK LLL MMM NNN OOO PPP QQQ 14:00 AAA BBB CCC DDD EEE FFF GGG HHH III JJJ KKK LLL MMM NNN OOO PPP QQQ 15:00 AAA BBB CCC DDD EEE FFF GGG HHH III JJJ KKK LLL MMM NNN OOO PPP QQQ 16:00 AAA BBB CCC DDD EEE FFF GGG HHH III JJJ KKK LLL MMM NNN OOO PPP QQQ 17:00 AAA BBB CCC DDD EEE FFF GGG HHH III JJJ KKK LLL MMM NNN OOO PPP QQQ
加载中...
- 热议问题