有没有办法只使用 CSS 为 table 做一个粘性的 header

Question

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

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

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

Answer 1

我知道你只想要 CSS，但老实说，我想说的最简单的方法就是实现一点 jQuery 并使用类似 floatThead[=13= 的东西]

它允许您以任何一种方式进行（滚动 table 或 window）并且只需要在页面上添加一点 JS。

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

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

上找到的

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

有没有办法只使用 CSS 为 table 做一个粘性的 header

Is there a way to do a sticky header for a table using CSS only

html

css

scroll

html-table

sticky