有没有办法只使用 CSS 为表格做一个粘性标题答案

【问题标题】：Is there a way to do a sticky header for a table using CSS only有没有办法只使用 CSS 为表格做一个粘性标题
【发布时间】：2015-10-15 03:17:50
【问题描述】：

我有一个简单的机场数据表：

<table cellspacing="0">

    <thead>
        <tr>
            <th>Type</th>
            <th>Flight number</th>
            <th>Company</th>
            <th>Plane</th>
            <th>Airport</th>
            <th>Time</th>
            <th>Status</th>

        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Take off</td>
            <td>UN 35</td>
            <td>UtAir</td>
            <td>SuperJet 100</td>
            <td>Lisboa</td>
            <td>20:54</td>
            <td>Delayed</td>
        </tr>
                    <tr>
            <td>Take off</td>
            <td>UN 45</td>
            <td>UtAir</td>
            <td>SuperJet 100</td>
            <td>Paris</td>
            <td>19:40</td>
            <td>Cancelled</td>
        </tr>
        <tr>
            <td>Take off</td>
            <td>UN 5</td>
            <td>UtAir</td>
            <td>SuperJet 100</td>
            <td>London</td>
            <td>21:10</td>
            <td>Boarding</td>
        </tr>

行数是动态的，表的一个实例有很多行，需要用户向下滚动页面。有没有办法仅使用 css 将表格的 thead 部分修复到屏幕顶部？也许是类似于this one: using two blocks to look like it's sticky 的解决方案，但针对thead？

【问题讨论】：

你试过什么？您是指<table> 中的表格还是基于div 的表格？你能重新提出你的问题吗？
我的意思是，英语不是我的母语。好吧，我尝试了一些使
可滚动的方法，但这不是我需要的，我有一个很大的
到页面底部，我需要坚持它的头部，而滚动，但我想知道只在 css 中这样做是真的吗

我认为在纯 CSS 中没有办法做到这一点。您可以使用类似的东西：Fixed header in CSS for conditional scroll down 用于基于divs 的表格，但它需要您的页面足够简单才能破解它。

是的，我读过它，我认为这可能是一些类似这样的技巧，但表的行为不同，这个解决方案可能有一些差异，但我不明白哪些

标签： html css scroll html-table sticky

【解决方案1】：

我知道你只想要 CSS，但老实说，我想说的最简单的方法就是实现一个小 jQuery 并使用像 floatThead 这样的东西

它允许你做任何一种方式（滚动表格或窗口），只需要页面上的一点点 JS。

$('table').floatThead({
    scrollingTop: pageTop,
    useAbsolutePositioning: true //the default value
});

另一个我非常喜欢的好例子是在CodePen

【讨论】：

谢谢，但我已经用过这个解决方案，我需要另一个

【解决方案2】：

Css styles: 

.tablesorter th {
    color: transparent;
    height: 0 !important;
    line-height: 0;
}

.tablesorter th div {
    color: black;
    background-color: #d5e9fd;
    font-size: 9pt;
    line-height: normal;
    position: absolute !important;
    top: 0;
    margin-left: 5px !important;
}
 .tblprogressbar {
        color: darkblue;
        text-align: center;
        text-decoration-color:red;
        height: 10px;
        width: 0;
        background-color: green;    
        border-radius: 1px; 
    } 


html#:
<div style="border-color:black; width: 100%; padding-top: 20px; position: relative;" class="ui-jqgrid-bdiv bgD5E9FD">
        <div style="height: 150px; overflow-y:auto;">
            <table id="ConnSortTable" class="ui-jqgrid-htable ui-common-table mt tablesorter" border="1" cellpadding="0" cellspacing="0" style="width: 100%;">
                <thead class="bgD5E9FD fcBlack f_9">
                    <tr>
                        <th style="display: none;">
                            <span><b>ID</b></span>
                        </th>
                        <th>
                            <div><b>Carrier</b></div>
                        </th>
                        <th>
                            <div><b>Flight</b></div>
                        </th>
                        <th>
                            <div ><b>Origin</b></div>
                        </th>
                        <th>
                            <div><b>Gate</b></div>
                        </th>
                        <th>
                            <div ><b>ETA</b></div>
                        </th>
                        <th>
                            <div><b>Status</b></div>
                        </th>
                        <th>
                            <div><b>Pax</b></div>
                        </th>
                    </tr>
                </thead>
                <tbody id="tBodyConnection" class="bg336699 fcWhite f_9"></tbody>
            </table>
        </div>
    </div>

【讨论】：