具有固定标头的仅CSS可滚动表

Question

具有固定标头的仅CSS可滚动表

Tro*_*ord 61 html css internet-explorer css3

我有一个解决方案,我可以通过使用次要的jQuery和CSS创建可固定页眉/页脚的可滚动表 - 但我正在寻找一种方法,使这个跨CSS浏览器兼容的CSS解决方案.

需要明确的是,我所寻求要做的就是使用只有一个table标签(和它是有效的子标签,colgroup,col,thead,tbody,tfoot,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);
});

Run Code Online (Sandbox Code Playgroud)

注意:提供的示例在IE中无法正确呈现,并且需要jQuery来提供水平滚动.无论如何我不关心水平滚动,所以如果解决方案不这样做就没问题.

Answer 1

Pur*_*rag 19

使用flexbox的解决方案尚未发布.

这是我的解决方案使用display: flex和:after(基于行李箱)的基本用途,即使滚动条填充tbody一点也能保持对齐.这已在Chrome 45,Firefox 39和MS Edge中得到验证.它可以使用前缀属性进行修改,以便在IE11中工作,并进一步在IE10中使用CSS hack和2012 flexbox语法.

注意表格宽度可以修改; 这甚至适用于100%宽度.

唯一需要注意的是,所有表格单元格必须具有相同的宽度.下面是一个明确设计的例子,但是当单元格内容不同时(表格单元格具有相同的宽度和自动换行,强制flexbox保持相同的宽度,无论内容如何),这都可以正常工作.这是一个单元格内容不同的示例.

只需将.scroll类应用于您想要滚动的表,并确保它具有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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

我很抱歉投票不足,但这不是一个解决方案,直到它真正解决了问题.没有表在每个单元格中具有相同宽度的内容.见这里:https://jsfiddle.net/npdob14y/1/ (4认同)
当单元格内容的宽度不同时，似乎无法在列内保持单元格宽度。 (2认同)

Answer 2

nkm*_*mol 18

此答案将用作不完全支持的占位符position: sticky,并将随着时间的推移进行更新.目前建议不要在生产环境中使用本机实现.

请参阅此内容以获取当前支持:https://caniuse.com/#feat=css-sticky

用于 `position: sticky`

另一种答案是使用position: sticky.如W3C所述:

粘性定位的盒子与相对定位的盒子类似地定位,但是偏移是参考具有滚动框的最近祖先计算的,或者如果没有祖先具有滚动框则计算视口.

这准确描述了相对静态头的行为.将其分配给<thead>第一个<tr>HTML标记会很容易,因为根据W3C应该支持这个标记.但是,Chrome,IE和Edge都无法为这些标记指定粘性位置属性.目前似乎没有优先解决这个问题.

对于表元素似乎有用的是将sticky属性分配给表单元格.在这种情况下,<th>细胞.

因为表不是一个遵循您分配给它的静态大小的块元素,所以最好使用包装元素来定义滚动溢出.

代码

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

在这个例子中,我使用一个简单的<div>包装器来定义使用静态高度完成的滚动溢出150px.这当然可以是任何尺寸.现在已经定义了滚动框,粘性<th>元素将与"具有滚动框的最近的祖先"相对应,这是div包装器.

使用`position: sticky` polyfill

不受支持的设备可以使用polyfill,它通过代码实现行为.一个例子是stickybits,它类似于浏览器实现的相同行为position: sticky.

polyfill的示例: http ://jsfiddle.net/7UZA4/6957/

粘滞表标题是CSS的神圣一环，并且“位置越早：粘滞”得到广泛支持就越好。 (4认同)

Answer 3

Vic*_*ria 7

据我所知,没有标准的方法来实现这一点,只有CSS,虽然我认为应该有.Mozilla浏览器过去常常用滚动体支持固定标题,但是在过去的几年里它们已经删除了它.

经过对这一点的研究,包括找到这个帖子,一位朋友刚刚为我开发了这个解决方案 ; 它使用Javascript但没有预制库,HTML标记的唯一要求是该表具有id名称.然后,在window.onload中,为每个表调用一个Javascript函数,给出id,height和width.如果在浏览器中禁用了Javascript,则会根据其原始标记显示整个表.如果启用了Javascript,则表格适合指定的高度和宽度,并且tbody会滚动,如果存在thead和tfoot,则它们将固定在顶部和底部.

Answer 4

Jan*_*roň 7

受@ Purag的回答启发,这是另一个flexbox解决方案:

/* 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); }

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

喜欢这个.只有css的大小是很好的,在我看来,没有比"width ="100px"`应用于第一行(这通常是调整列的大小所需)的"丑陋". (2认同)

Answer 5

Max*_*nna 5

我已经使用以下代码轻松实现了这一点：

所以你有一个像这样的结构：

<table>
<thead><tr></tr></thead>
<tbody><tr></tr></tbody>
</table>

Run Code Online (Sandbox Code Playgroud)

只需通过以下方式设置thead的样式：

<style>
thead{ 
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0px;
}
</style>

Run Code Online (Sandbox Code Playgroud)

要考虑的三件事：

首先，此属性是新的。除了基于Webkit的浏览器的beta版之外，完全不支持它。因此，请注意格式化程序。同样，如果您确实希望用户从粘性标头中受益，请使用javascript实现。

其次，如果要使用它，则需要合并供应商前缀。也许的位置：粘性会一天。不过，到目前为止，您需要使用position：-webkit-sticky（以及其他位置；请在本文中进一步检查CSS块）。

第三，目前没有任何定位默认值，因此您至少需要包括top：0; 在与位置相同的CSS声明中：-webkit-sticky。否则，它只会在屏幕外滚动。

归档时间：	13 年，2 月前
查看次数：	154513 次
最近记录：	6 年前

具有固定标头的仅CSS可滚动表

用于 position: sticky

代码

使用position: sticky polyfill

用于 `position: sticky`

使用`position: sticky` polyfill