带有固定标题的仅 CSS 可滚动表 [英] CSS-Only Scrollable Table with fixed headers
问题描述
我有一个解决方案,通过它我可以使用次要的 jQuery 和 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);});
注意:提供的示例在 IE 中无法正确呈现,需要 jQuery 提供水平滚动.反正我不关心水平滚动,所以如果解决方案不这样做也没关系.
此答案将用作不完全支持的 position:sticky
的占位符,并将随时间更新.目前建议不要在生产环境中使用本机实现.
查看当前支持:https://caniuse.com/#feat=css-sticky
使用position:sticky
另一种答案是使用position:sticky
.如 W3C 所述:
粘性定位框的定位与相对定位框类似,但偏移量是根据最近的具有滚动框的祖先或视口(如果没有祖先具有滚动框)计算的.
这准确地描述了相对静态标头的行为.将它分配给 似乎对表格元素有用的是将粘性属性分配给表格单元格.在这种情况下, 因为表格不是尊重您分配给它的静态大小的块元素,所以最好使用包装元素来定义滚动溢出. 在这个例子中,我使用一个简单的 不受支持的设备可以使用 polyfill,它通过代码实现行为.一个例子是 stickybits,它与浏览器实现的 polyfill 示例: http://jsfiddle.net/7UZA4/6957/ I have a solution by which I can create scrollable tables w/fixed header/footer using minor jQuery and CSS - but I am looking for a way to make this a CSS-only solution that is cross-browser compliant. To be clear, what I am seeking to do is use only a This code example: http://jsfiddle.net/TroyAlford/SNKfd/ shows my current approach. Most of the JS is just to populate the table with random values, but the last portion is what drives the left/right scrollability. NOTE: The example provided does not render properly in IE, and requires jQuery to provide the horizontal scrolling. I don't care about horizontal scrolling anyway, so it's fine if a solution doesn't do that. This answer will be used as a placeholder for the not fully supported See this for the current support: https://caniuse.com/#feat=css-sticky An alternative answer would be using A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box. This described exactly the behavior of a relative static header. It would be easy to assign this to the What does seem to work for a table element is assigning the sticky property to a table-cell. In this case the Because a table is not a block-element that respects the static size you assign to it, it is best to use a wrapper element to define the scroll-overflow.
In this example I use a simple Non-supported devices can make use of a polyfill, which implements the behavior through code. An example is stickybits, which resembles the same behavior as the browser's implemented Example with polyfill: http://jsfiddle.net/7UZA4/6957/ 这篇关于带有固定标题的仅 CSS 可滚动表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! 或第一个
HTML 标签会很容易,因为这应该被支持 根据 W3C.但是,Chrome、IE 和 Edge 在为这些标签分配粘性位置属性时遇到问题.目前似乎也没有优先解决这个问题. 单元格. 代码
div {显示:内联块;高度:150px;溢出:自动}表 th {位置:-webkit-sticky;位置:粘性;顶部:0;}/* == 只是一般样式,不相关:) == */桌子 {边框折叠:折叠;}第 {背景色:#1976D2;颜色:#fff;},TD{填充:1em .5em;}表 tr {颜色:#212121;}表 tr:nth-child(odd) {背景颜色:#BBDEFB;}
150px
的静态高度完成的滚动溢出.这当然可以是任何大小.现在已经定义了滚动框,粘性 元素将对应到最近的带有滚动框的祖先",即 div-wrapper. 使用
position:sticky
polyfillposition:sticky
.table
tag (and it's valid sub-tags, colgroup
, col
, thead
, tbody
, tfoot
, tr
, th
, td
), but adopt a set of CSS rules which will meet the following conditions:
$tbody.bind('scroll', function(ev) {
var $css = { 'left': -ev.target.scrollLeft };
$thead.css($css);
$tfoot.css($css);
});
position: sticky
and will be updated over time. It is currently advised to not use the native implementation of this in a production environment.
Use of
position: sticky
position: sticky
. As described by W3C:
<thead>
or the first <tr>
HTML-tag, as this should be supported according to W3C. However, both Chrome, IE and Edge have problems assigning a sticky position property to these tags. There also seems to be no priority in solving this at the moment.<th>
cells.The code
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>
<div>
wrapper to define the scroll-overflow done with a static height of 150px
. This can of course be any size. Now that the scrolling box has been defined, the sticky <th>
elements will corespondent "to the nearest ancestor with a scrolling box", which is the div-wrapper.
Use of a
position: sticky
polyfillposition: sticky
.
登录
关闭