Question

我需要强调的是，这是关于第一列固定的HORIZONTAL滚动，因为大多数答案都给了我垂直滚动的解决方案。

是否可以使用纯css来创建一个水平滚动的表，但是第一个标题和第一列是固定的，其余内容是否可滚动？

例如，如果我有这张表：

<table>
  <thead>
   <tr>
     <th class="head1">Head 1</th>
     <th class="head2">Head 2</th>
     <th class="head2">Head 3</th>
   </tr>
  </thead>
  <tbody>
   <tr>
     <td class="col1">Col 1</td>
     <td class="col2">Col 2</td>
     <td class="col3">Col 3</td>
   </tr>
  </tbody>
</table>

head1和col1将始终显示，其他列可滚动。

Answer 1

This就是我追求的目标。该示例使用2个浮动左侧的表，并将溢出应用于包装最右表的div。两个表都包含在具有固定宽度的div中。

<div class="table-container">
  <div class="left">
    <table>
      ...
    </table>
   </div>
  <div class="right">
    <table>
      ...
    </table>
   </div>
</div>

.table-container {
    position: relative;
    width: 600px;
    height: 100%;    
    display: inline-block;
}
table {
    float: left;
}

.right {
    overflow: auto;
}

Answer 2

<table >
   <tr>
      <th>abc</th>
      <th>xyz</th>
   </tr>

 <tr>
    <td colspan="2">
        <div  style="height:50px; overflow:scroll;">
           <table>
                <tr>
                  <td>1</td>
                  <td>1</td>
                </tr>

                <tr>
                  <td>2</td>
                  <td>2</td>
                </tr>

                <tr>
                  <td>3</td>
                  <td>3</td>
                </tr> 
          </table>
       </div>
     </td>
   </tr>
  </table>

请检查一下。这可能是有效的。

具有固定的第一个标题和固定列的表

2 个答案: