向表格主体添加滚动条

Question

我想在不使用任何其他库的情况下尽可能轻松地做到这一点。

在我很长的表格中，我想在<tbody> 标签中添加一个滚动条，以便头部始终可见，但它不起作用。你能帮忙吗？

小提琴：http://jsfiddle.net/Hpx4L/

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody style="overflow-y:scroll; height:100px;"> <!-- wont work -->
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

Answer 1

如果您不想在任何 div 下包装表​​格：

table{
  table-layout: fixed;
}
tbody{
      display: block;
    overflow: auto;
}

Answer 2

这些解决方案通常存在标题列与正文列对齐的问题，并且在调整大小时可能无法正常工作。我知道你不想使用额外的库，但如果你碰巧使用 jQuery，这个库真的很小。它支持固定页眉、页脚、列跨度 (colspan)、水平滚动、调整大小以及在滚动开始前显示的可选行数。

jQuery.scrollTableBody (GitHub)

只要您有一个正确的<thead>、<tbody> 和（可选）<tfoot> 的表，您需要做的就是：

$('table').scrollTableBody();

Answer 3

这是因为您在表中的<td> 之前添加了<tbody> 标签，如果没有<td>，您将无法打印任何数据。

因此，您必须使用position: fixed; 来创建<div> 说#header

 header
 {
      position: fixed;
 }

创建另一个<div>，它将充当<tbody>

tbody
{
    overflow:scroll;
}

现在您的标题已固定，正文将滚动。并且标题将保留在那里。

Answer 4

您可以将<tbody> 的内容包装在可滚动的<div> 中：

html

....
<tbody>
  <tr>
    <td colspan="2">
      <div class="scrollit">
        <table>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          ...

css

.scrollit {
    overflow:scroll;
    height:100px;
}

查看我的 jsfiddle，从你的分支：http://jsfiddle.net/VTNax/2/