html - 如何修复 HTML 表格中的第一列以允许水平滚动？

Question

我有一个四列三行的表。我想在表格上添加水平滚动，但第一列应该保持固定。

我的 HTML 结构如下：

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

我可以使用什么 CSS 来实现这种效果？

Answer 1

您可以在单独的 div 中创建两个表。查看此演示以获取示例。

CSS

#col-one {
    float: left;
    background-color: red;
}
#col-two {
    float: left;
    background-color: green;
}

HTML

<div id="col-one">
<table width="200px" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>abc</td>
  </tr>
  <tr>
    <td>123</td>
  </tr>
  <tr>
    <td>abc</td>
  </tr>
</table>
</div>
<div id="col-two">
<table width="600px" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>123</td>
    <td>abc</td>
    <td>123</td>
  </tr>
  <tr>
    <td>abc</td>
    <td>123</td>
    <td>abc</td>
  </tr>
  <tr>
    <td>123</td>
    <td>abc</td>
    <td>123</td>
  </tr>
</table>
</div>​

Answer 2

使用display:table选项通过纯 CSS 和 div 完成它。

HTML

<div class="table">
    <div class="table_row">
        <div >xzv</div>
        <div>fjgj</div>
        <div>gj g</div>
        <div>gdj hk</div>
    </div>
    <div class="table_row">
        <div >8080</div>
        <div>7808</div>
        <div>870g</div>
        <div>80hk</div>
    </div>
</div>
​

CSS

  body{margin:20px}
  .table{
       display:table; 
       border-top:solid 1px red; 
       border-left:solid 1px red; 
       width:100%
     }
    .table_row{
        display:table-row
     }
    .table_row div{
        display:table-cell; 
        border-right:solid 1px red; 
        border-bottom:solid 1px red
     }​

演示