具有固定标题的纯CSS滚动表
我有一个解决方案，可以使用次要的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提供水平滚动。无论如何，我都不在乎水平滚动，所以如果解决方案不这样做就很好。
慕桂英4014372浏览 534回答 3
3回答
-
手掌心
惊讶的是尚未发布使用flexbox的解决方案。这是我的解决方案的使用，display: flex以及:after（感谢Luggage）的基本用法来保持对齐，即使滚动条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;}.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> -
慕标5832272
据我所知，没有标准的方法可以仅使用CSS来实现这一目标，尽管我认为应该这样做。Mozilla浏览器过去一直支持带有滚动体的固定标头，但最近几年已将其删除。经过一番研究，包括找到这篇文章，一个朋友刚刚为我开发了这个解决方案。它使用Javascript，但不使用罐头库，并且HTML标记的唯一要求是表具有ID名称。然后，在window.onload处，为每个提供ID，高度和宽度的表调用一个Javascript函数。如果在浏览器中禁用了Javascript，则会根据其原始标记显示整个表格。如果启用了Javascript，则表格将适合指定的高度和宽度，并且tbody会滚动；如果thead和tfoot存在，则会固定在顶部和底部。
随时随地看视频慕课网APP
Html/CSS