Html 仅CSS可滚动的固定标题表

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

明确地说，我想做的是只使用一个

表
标记（它是有效的子标记，
colgroup
，
col
，
thead
，
tbody
，
tfoot
，
tr
，
th
，
td
），但采用一套CSS规则，这些规则将满足以下条件：

必须在页眉/页脚/内容行之间保持列对齐
必须允许页眉/页脚在内容垂直滚动时保持固定
必须不需要任何jQuery或其他JavaScript来提供功能
必须仅使用上面提供的标签
这个代码示例：显示了我当前的方法。大多数JS只是用随机值填充表，但最后一部分是驱动左/右滚动的因素

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

注意：提供的示例在IE中无法正确呈现，需要jQuery提供水平滚动。无论如何，我不关心水平滚动，因此如果解决方案不这样做，那也没关系。
如果您可以选择为表格单元格指定固定宽度（并为标题指定固定高度），则可以使用
位置：fixed
选项：


您只需将其粘贴在
iframe
中即可。您还可以通过给
iframe
一个滚动条（我想）来进行水平滚动


编辑2015

如果您可以使用预先定义的表格单元格宽度（按百分比），那么这里有一个更优雅（仅限于CSS）的解决方案：

据我所知，只有CSS没有标准的方法来实现这一点，尽管我认为应该有。Mozilla浏览器过去支持带有滚动体的固定标题，但在过去几年中已经将其删除

在对这篇文章进行了一些研究，包括找到了这篇文章之后，一位朋友为我开发了一个新的帖子；它使用Javascript，但没有固定的库，HTML标记的唯一要求是表具有id名称。然后，在window.onload，为每个表调用一个Javascript函数，给出id、高度和宽度。如果浏览器中禁用了Javascript，则整个表将根据其原始标记显示。如果启用了Javascript，表格将适合指定的高度和宽度，tbody将滚动，如果存在thead和tfoot，它们将固定在顶部和底部。
我看到这个线程已经有一段时间处于非活动状态，但我对这个主题感兴趣，现在使用一些CSS3选择器，这就变得更容易了（而且仅使用CSS就可以实现）

此解决方案依赖于表容器的最大高度。但只要您可以使用
：first child
选择器，就支持该选项

小提琴

如果有人能改进这个答案，请做！我计划很快在商业应用程序中使用此解决方案

HTML

<div id="con">
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>        
    <tbody>             
    </tbody>
</table>
</div>

由于我最近需要它，我将共享一个使用3个表但不需要JavaScript的解决方案

表1（父级）包含两行。第一行包含列标题的表2（子1）。第二行包含滚动内容的表3（子2）

必须注意
childTbl
必须比
parentTbl
短
25px才能正确显示滚动条

是我的灵感来源。我使它对HTML5友好，没有不推荐的标签和内联CSS


.parentTbl表{
边界间距：0；
边界塌陷：塌陷；
边界：0；
宽度：690px；
}
.childTbl表格{
边界间距：0；
边界塌陷：塌陷；
边框：1px实心#d7d7；
宽度：665px；
}
.childTbl th，
.childTbl td{
边框：1px实心#d7d7；
}
.滚动数据{
宽度：690；
高度：150像素；
溢出x：隐藏；
}

标题1
标题2
标题3
标题4
标题5
标题6
表数据1
表数据2
表数据3
表数据4
表数据5
表数据6
表数据1
表数据2
表数据3
表数据4
表数据5
表数据6
表数据1
表数据2
表数据3
表数据4
表数据5
表数据6
表数据1
表数据2
表数据3
表数据4
表数据5
表数据6
表数据1
表数据2
表数据3
表数据4
表数据5
表数据6
表数据1
表数据2
表数据3
表数据4
表数据5
表数据6
表数据1
表数据2
表数据3
表数据4
表数据5
表数据6
表数据1
表数据2
表数据3
表数据4
表数据5
表数据6
表数据1
表数据2
表数据3
表数据4
#con{
    max-height:300px;
    overflow-y:auto;
}
thead tr:first-child {
    background-color:#00f;
    color:#fff;
    position:absolute;
}
tbody tr:first-child td{
    padding-top:28px;
}

<style>
    .hiddenScrollbar::-webkit-scrollbar {
        background-color: transparent;
    }
</style>

function rAF(scrollLeft) {
  var offsetLeft = 0 - scrollLeft;
  $('.hdr__inner span:first-child').css('margin-left', offsetLeft);
}

tr {
  width: 100%;
  display: inline-table;
  table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: -moz-groupbox;    // Firefox Bad Effect
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

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

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