HTML, CSS , 带有修复标题的表格正文滚动

Posted 2023-03-06

【中文标题】HTML, CSS , 带有修复标题的表格正文滚动

【英文标题】：HTML, CSS , Table body scrolling with fix header

【发布时间】：2017-04-11 21:37:33

【问题描述】：

我希望我的表格可以使用固定标题垂直滚动。我还想让表格宽度适合浏览器。

**请尽可能不要对“html”部分进行任何更改，仅在“css”部分进行，

这是我的JSfiddle

table
  border-spacing: 0;
  border: 2px solid black;


table tbody tr td, thead th 
    border-right: 1px solid black;

<div class="table_container">
  <table>
  <thead>
  <tr>
      <th>Head 1</th>
      <th>Head 2</th>
      <th>Head 3</th>
      <th>Head 4</th>
      <th>Head 5</th>
  </tr>
  </thead>
  <tbody>
  <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
  </tr>
  <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
  </tr>
  <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
  </tr>
  </tbody>
  </table>
</div>

【问题讨论】：

你试过了吗？

是的，但它只是把所有事情都搞砸了

HTML table with fixed headers?的可能重复

【参考方案1】：

试试这个

.table_container table
    display: table;
    width: 100%;

  .table_container table thead,   .table_container table tbody 
    float: left;
    width: 100%;

  .table_container table tbody 
    overflow: auto;
    height: 70px;

  .table_container table tr 
    width: 100%;
    display: table;
    text-align: left;

  .table_container table th,   .table_container table td 
    width:20%;

【讨论】：

非常感谢，但是我们可以根据内容长度自动调整列和标题吗？

去掉宽度 .table_container table th, .table_container table td 会自动调整

我做到了，但表格数据未在其标题上对齐

【参考方案2】：

我不是重新发明事物的忠实拥护者，因此 md_data_table 是一个不错的选择。 （适用于 Angular 1.5.8，Angular2 也将支持）

https://github.com/iamisti/mdDataTable

bower install md-data-table --save

浮游生物