html - 如何创建带有固定/冻结的左列和可滚动主体的HTML表？(How do I create an HTML table with a fixed/frozen left column and a scrollable body?)

Question

I need a simple solution.

(我需要一个简单的解决方案。)

I know it's similar to some other questions, like:

(我知道它与其他一些问题类似，例如：)

• HTML table with fixed headers and a fixed column?

  (具有固定标题和固定列的HTML表？)

• How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?

  (滚动时（可能使用JavaScript和CSS）如何锁定表的第一行和第一列？)

But I need just a single left column to be frozen and I would prefer a simple and script-less solution.

(但是我只需要冻结一个左列，我希望有一个简单且无脚本的解决方案。)

  ask by agsamek translate from so

Answer 1

If you want a table where only the columns scroll horizontally, you can position: absolute the first column (and specify its width explicitly), and then wrap the entire table in an overflow-x: scroll block.

(如果您想要一个只有列水平滚动的表，则可以position: absolute第一列的position: absolute （并明确指定其宽度），然后将整个表包装在overflow-x: scroll块中。)

Don't bother trying this in IE7, however...

(不过，请不要在IE7中尝试此操作...)

Relevant HTML & CSS:

(相关的HTML和CSS：)

 table { border-collapse: separate; border-spacing: 0; border-top: 1px solid grey; } td, th { margin: 0; border: 1px solid grey; white-space: nowrap; border-top-width: 0px; } div { width: 500px; overflow-x: scroll; margin-left: 5em; overflow-y: visible; padding: 0; } .headcol { position: absolute; width: 5em; left: 0; top: auto; border-top-width: 1px; /*only relevant for first row*/ margin-top: -1px; /*compensate for top border*/ } .headcol:before { content: 'Row '; } .long { background: yellow; letter-spacing: 1em; } 

 <div> <table> <tr><th class="headcol">1</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> <tr><th class="headcol">2</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> <tr><th class="headcol">3</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> <tr><th class="headcol">4</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> <tr><th class="headcol">5</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> <tr><th class="headcol">6</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> </table> </div> 

Fiddle

(小提琴)