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

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

我的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来实现这种效果？

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

CSS

HTML

abc
123
abc
123
abc
123
abc
123
abc
123
abc
123
​

使用

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>
​

---

表格分成两部分，这是什么意思？？你需要带div的表结构吗？你能举例说明最终结果应该是什么样的吗？你只能用div来实现。不需要使用表格。从技术上讲，将td放在div中是错误的。Somya@yes我想在表上添加水平滚动，但第一列shuld保持不变。@user1944725:如果您只想将它们显示在单独的分区中，那么只需在第一列周围加上边框即可。这样您就不需要使用divs。您添加了另一个表以增加加载时间。浏览器兼容性如何？

<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>​

<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>
​

  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
     }​