Question

我想用纯css 设置表格，其标题可以固定，而正文可以垂直滚动。
这是我的demo

/*css for fixed header, vertically scrollable body*/ .fixedHeader { width: 100%; } .fixedHeader thead { display: block; width: cal(100% - 17px); } .fixedHeader tbody { display: block; width: 100%; max-height: 200px; overflow-y: auto; overflow-x: hidden; } /*custom appearance for your table*/ .fixedHeader { border: 1px solid gray; border-collapse: collapse; } .fixedHeader th, .fixedHeader td { border: 1px solid gray; }

<table class="fixedHeader"> <thead> <tr> <th>Name</th> <th>Color</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Apple</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Pear</td> <td>Green</td> <td>These are green.</td> </tr> <tr> <td>Grape</td> <td>Purple / Green</td> <td>These are purple and green.</td> </tr> <tr> <td>Orange</td> <td>Orange</td> <td>These are orange.</td> </tr> <tr> <td>Banana</td> <td>Yellow</td> <td>These are yellow.</td> </tr> <tr> <td>Kiwi</td> <td>Green</td> <td>These are green.</td> </tr> <tr> <td>Plum</td> <td>Purple</td> <td>These are Purple</td> </tr> <tr> <td>Watermelon</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Tomato</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Cherry</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Cantelope</td> <td>Orange</td> <td>These are orange inside.</td> </tr> <tr> <td>Honeydew</td> <td>Green</td> <td>These are green inside.</td> </tr> <tr> <td>Papaya</td> <td>Green</td> <td>These are green.</td> </tr> <tr> <td>Raspberry</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Blueberry</td> <td>Blue</td> <td>These are blue.</td> </tr> <tr> <td>Mango</td> <td>Orange</td> <td>These are orange.</td> </tr> <tr> <td>Passion Fruit</td> <td>Green</td> <td>These are green.</td> </tr> </tbody> </table>

让我感到困惑的是那个元素（也许我的理解完全错误，请纠正我），td / th的百分比宽度指的是地球上的？

Answer 1

此链接： JS Fiddle 应该管用。尝试使用此表上的CSS来提供帮助。这是css：

table.scroll {
width: 100%; /* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}

table.scroll tbody,
table.scroll thead { display: block; }

thead tr th { 
height: 30px;
line-height: 30px;
/*text-align: left;*/
}

table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}

tbody { border-top: 2px solid black; }

tbody td, thead th {
width: 20%; /* Optional */
border-right: 1px solid black;
}

tbody td:last-child, thead th:last-child {
border-right: none;
}

修改

Javascript是这方面的主要关键：

// Adjust the width of thead cells when window resizes $(window).resize(function() { // Get the tbody columns width array colWidth = $bodyCells.map(function() { return $(this).width(); }).get(); // Set the width of thead columns $table.find('thead tr').children().each(function(i, v) { $(v).width(colWidth[i]); }); }).resize(); // Trigger resize handler

希望它有所帮助。

Answer 2

您可以使用固定宽度td和th，并将position:fixed提供给thead。因此thead将保留在表格的顶部，tbody将滚动。

.fixedHeader{
  width:480px;
   max-height:200px;
  overflow-y:auto;
  overflow-x:hidden;
  display:block;
}
.fixedHeader thead{
  position:fixed;
  background:blue;
  color:white
}
/*custom appearance for your table*/
.fixedHeader{
  border:1px solid gray;
  border-collapse:collapse;
}

.fixedHeader th, .fixedHeader td{
  border:1px solid gray;
  width:150px
}

<table class="fixedHeader">
  <thead>
    <tr>
      <th>Name</th>
      <th>Color</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Pear</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Grape</td>
      <td>Purple / Green</td>
      <td>These are purple and green.</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
      <td>These are yellow.</td>
    </tr>
    <tr>
      <td>Kiwi</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Plum</td>
      <td>Purple</td>
      <td>These are Purple</td>
    </tr>
    <tr>
      <td>Watermelon</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Tomato</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Cherry</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Cantelope</td>
      <td>Orange</td>
      <td>These are orange inside.</td>
    </tr>
    <tr>
      <td>Honeydew</td>
      <td>Green</td>
      <td>These are green inside.</td>
    </tr>
    <tr>
      <td>Papaya</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
    <tr>
      <td>Raspberry</td>
      <td>Red</td>
      <td>These are red.</td>
    </tr>
    <tr>
      <td>Blueberry</td>
      <td>Blue</td>
      <td>These are blue.</td>
    </tr>
    <tr>
      <td>Mango</td>
      <td>Orange</td>
      <td>These are orange.</td>
    </tr>
    <tr>
      <td>Passion Fruit</td>
      <td>Green</td>
      <td>These are green.</td>
    </tr>
  </tbody>
</table>

td上的百分比宽度/不工作（jsfiddle）

2 个答案: