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中做两个表。有关示例，请查看此 DEMO 。

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
     }

<强> DEMO

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

2 个答案: