51

我想在没有任何额外库的情况下尽可能轻松地做到这一点。

在我很长的表格中，我想在<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>
4

4 回答 4

82

您可以将内容包装<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/

于 2013-07-03T14:45:15.050 回答
16

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

jQuery.scrollTableBody (GitHub)

只要您有一张带有正确<thead>、<tbody>和 (optional)的表格<tfoot>，您需要做的就是：

$('table').scrollTableBody();
于 2013-09-24T05:33:10.120 回答
6

这是因为您<tbody>之前在表格中添加了标签，<td>没有<td>.

因此，为此，您必须发表<div>意见#headerposition: fixed;

 header
 {
      position: fixed;
 }

制作另一个<div>将充当<tbody>

tbody
{
    overflow:scroll;
}

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

于 2013-07-03T14:53:36.290 回答
-1

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

table{
  table-layout: fixed;
}
tbody{
      display: block;
    overflow: auto;
}
于 2017-12-20T18:38:31.113 回答