Question

我希望我的表可以使用修复标题垂直滚动。我还想让桌面宽度适合浏览器。

**请尽可能不要对＆＃39; html＆＃39;进行任何更改。部分，只是在＆＃39; css＆＃39;部分，

这是我的JSfiddle

＆＃13;

table{
  border-spacing: 0;
  border: 2px solid black;
}

table tbody tr td, thead th {
    border-right: 1px solid black;
}

＆＃13;

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

＆＃13;

Answer 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%;
}

Answer 2

不是重塑事物的忠实粉丝，所以md_data_table是一个很好的选择。（适用于Angular 1.5.8，Angular2也支持）

https://github.com/iamisti/mdDataTable

bower install md-data-table --save

浮游生物

HTML，CSS，表体滚动与修复标题

2 个答案: