问题：

仅CSS可滚动表格，带有固定标题[重复]

东郭阳德

2023-03-14

我有一个解决方案，通过它，我可以使用minor jQuery和CSS创建带有固定页眉/页脚的可滚动表，但我正在寻找一种方法，使其成为唯一一个跨浏览器兼容的CSS解决方案。

明确地说，我想要做的是只使用一个table标记（它是有效的子标记，colgroup，colgroup，thead，tbody，tft，tr，th，td），但采用一组满足以下条件的CSS规则：

必须在页眉/页脚/内容行之间保持列对齐
必须允许页眉/页脚在内容垂直滚动时保持固定
必须不需要任何jQuery或其他JavaScript才能提供功能
必须仅使用上面提供的标签

此代码示例：http://jsfiddle.net/TroyAlford/SNKfd/显示了我当前的方法。大多数JS只是用随机值填充表，但最后一部分是驱动左/右滚动的因素。

$tbody.bind('scroll', function(ev) {
    var $css = { 'left': -ev.target.scrollLeft };
    $thead.css($css);
    $tfoot.css($css);
});

注意：提供的示例不能在IE中正确渲染，需要jQuery提供水平滚动。无论如何，我不关心水平滚动，所以如果解决方案不这样做也没关系。

共有3个答案

杜凯

2023-03-14

受@Purag回答的启发，这里有另一个flexbox解决方案：

css prettyprint-override">/* basic settings */
table { display: flex; flex-direction: column; width: 200px; }
tr { display: flex; }
th:nth-child(1), td:nth-child(1) { flex-basis: 35%; }
th:nth-child(2), td:nth-child(2) { flex-basis: 65%; }
thead, tbody { overflow-y: scroll; }
tbody { height: 100px; }

/* color settings*/
table, th, td { border: 1px solid black; }
tr:nth-child(odd) { background: #EEE; }
tr:nth-child(even) { background: #AAA; }
thead tr:first-child { background: #333; }
th:first-child, td:first-child { background: rgba(200,200,0,0.7); }
th:last-child, td:last-child { background: rgba(255,200,0,0.7); }

<table>
    <thead>
      <tr>
        <th>a
        <th>bbbb
    <tbody>
      <tr>
        <td>fooo vsync dynamic
        <td>bar
      <tr>
        <td>a
        <td>b
      <tr>
        <td>a
        <td>b
      <tr>
        <td>a
        <td>b
      <tr>
        <td>a
        <td>b
      <tr>
        <td>a
        <td>b
      <tr>
        <td>a
        <td>b
  </table>

唐啸

2023-03-14

令人惊讶的是，使用flexbox的解决方案还没有发布。

这是我的解决方案，使用show： flex和的基本用途：在之后（感谢行李）保持对齐，即使滚动条填充了tbody一点。这已经在Chrome45、火狐39和微软边缘进行了验证。它可以用前缀属性进行修改，以便在IE11中工作，进一步在IE10中使用CSS黑客和2012年flexbox语法。

注：表格宽度可以修改；这甚至可以在100%宽度下工作。

唯一需要注意的是，所有表格单元格必须具有相同的宽度。下面是一个明显人为设计的示例，但当单元格内容发生变化时（表单元格都具有相同的宽度和文字换行，迫使flexbox保持相同的宽度，而不管内容如何），这种方法很好。下面是一个单元格内容不同的示例。

只需应用。将类滚动到您想要滚动的表中，并确保该表有一个thead：

.scroll {
  border: 0;
  border-collapse: collapse;
}

.scroll tr {
  display: flex;
}

.scroll td {
  padding: 3px;
  flex: 1 auto;
  border: 1px solid #aaa;
  width: 1px;
  word-wrap: break-word;
}

.scroll thead tr:after {
  content: '';
  overflow-y: scroll;
  visibility: hidden;
  height: 0;
}

.scroll thead th {
  flex: 1 auto;
  display: block;
  border: 1px solid #000;
}

.scroll tbody {
  display: block;
  width: 100%;
  overflow-y: auto;
  height: 200px;
}

<table class="scroll" width="400px">
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
    <td>Data</td>
  </tr>
</table>

谭煜

2023-03-14

这个答案将被用作不完全支持的位置的占位符：粘性，并将随着时间的推移而更新。目前建议不要在正式生产环境中使用本机实现。

有关当前的支持，请参见以下内容：https://caniuse.com/#feat=css-粘的

另一个答案是使用位置：粘性。正如W3C所描述的：

粘性定位框的定位方式与相对定位框的定位方式类似，但偏移量是使用滚动框参照最近的祖先计算的，如果没有祖先具有滚动框，则参照视口计算。

这正好描述了相对静态头的行为。将其分配给

对于table元素来说，似乎有效的方法是将sticky属性指定给表单元格。在这种情况下，

由于表不是一个符合您指定给它的静态大小的块元素，因此最好使用包装器元素来定义滚动溢出。

div {
  display: inline-block;
  height: 150px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}


/* == Just general styling, not relevant :) == */

table {
  border-collapse: collapse;
}

th {
  background-color: #1976D2;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}

table tr:nth-child(odd) {
  background-color: #BBDEFB;
}

<div>
  <table border="0">
    <thead>
      <tr>
        <th>head1</th>
        <th>head2</th>
        <th>head3</th>
        <th>head4</th>
      </tr>
    </thead>
    <tr>
      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
      <td>row 1, cell 2</td>
      <td>row 1, cell 2</td>
    </tr>
  </table>
</div>

类似资料：

具有固定标题的纯CSS滚动表

问题内容：我有一个解决方案，可以使用较小的jQuery和CSS创建带有固定页眉/页脚的可滚动表-但我正在寻找一种方法，使之成为跨浏览器兼容的仅CSS解决方案。需要明确的是，我所寻求要做的是使用只有一个标签（和它是有效的子标签，，，，，，，，），而是采用了一套将符合下列条件的CSS规则：必须保持页眉/页脚/内容行之间的列对齐当内容垂直滚动时，必须允许页眉/页脚保持固定不得使用任何jQu
带有HTML和CSS的表格滚动[重复]

我有一个类似的表格，我用数据填充它而CSS就是这样但是scroll不起作用，我想固定桌子的高度，如果超过了，就使用scrollbar
带有水平滚动条和垂直滚动条的固定标题表

我一直在努力解决HTML/CSS粘滞头+滚动条的问题。我们正在创建一个程序，一旦containersize达到某个点（取决于用户的分辨率），就需要滚动条显示出来。我在表中的第二列上强制设置一个min-width,因此表在某个点停止递减,并强制容器保持在某个宽度。容器上的溢出显示水平滚动条。一切正常。一旦我为垂直滚动添加了第二个滚动条，事情就会变得一团糟。有人有解决这个问题的办法吗？我想在.tab
仅冻结html表的顶部行（固定表标题滚动）

问题内容：我想制作一个冻结顶部行的html表（因此，当您垂直向下滚动时，总是可以看到它）。有没有使这种情况发生的聪明方法，而无需使用javascript？请注意，我不需要冻结左列。问题答案：如果没有JavaScript，您将无法有效实现这一目标……特别是如果您想要跨浏览器支持。您采取的任何方法都有很多问题，特别是关于跨浏览器/版本支持的问题。编辑：即使不是您要修复的标头，而是数据的
带有HTML和CSS的表格滚动

问题内容：我有一张像这样的桌子，上面有数据 and CSS like that 但滚动不起作用，我想固定表格的高度，如果超出高度，则使用滚动条问题答案： Table with Fixed Header Result This is working in all browser
如何在可滚动的div内制作固定的标题表？

问题内容：我想固定表头。表格位于可滚动div中。下面是我的代码。以下是我用于以上div的CSS：问题答案：怎么做这样的事情？我从头开始… 我所做的是使用2个表，一个表用于标题，该表始终是静态的，而另一个表呈现单元格，我使用固定高度的元素包装了这些单元格，并启用了滚动还要确保使用固定宽度的元素，以便在使用不带字符串的情况下不会断线，以便在使用时断开该字符串

仅CSS可滚动表格，带有固定标题[重复]

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档