如何创建带有固定/冻结的左列和可滚动主体的HTML表？

Question

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

Answer 1

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

相关的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>