如何用粘性table头制作Bootstrap表（） _table

Table可以正确地对齐/记录数据, 但有时表中的数据太长, 因此为了正确读取数据, 遍历表时应始终保持各个列的标题可用。在这种情况下, 需要使用粘性表头来使表更翔实和准确, 这可以使用CSS属性来实现, 即头行元素的位置和顶部
语法如下：

在CSS文件中：
< style> .header{ position:sticky; top: 0 ; } < /style>
在HTML文件中：
< th class="header" scope="col">

以下示例说明了该方法：
【如何用粘性table头制作Bootstrap表（）】范例1：
顶部的表具有长列和固定的标题。

< !DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < meta http-equiv = "X-UA-Compatible" content = "ie=edge" /> < title > Document< / title > < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous" /> < script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous" > < / script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous" > < / script > < script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous" > < / script > < style > .header { position: sticky; top:0; } .container { width: 600px; height: 300px; overflow: auto; } h1{ color: green; } < / style > < / head > < body > < div class = "container" > < h1 > lsbin< / h1 > < b > Sticky header in table< / b > < table class = "table" > < thead style = "position: sticky; top: 0" class = "thead-dark" > < tr > < th class = "header" scope = "col" > Course< / th > < th class = "header" scope = "col" > Start Date< / th > < th class = "header" scope = "col" > Fees< / th > < th class = "header" scope = "col" > Type< / th > < / tr > < / thead > < tbody > < tr > < td > CAT< / td > < td > 1st Aug< / td > < td > Free< / td > < td > Online< / td > < / tr > < tr > < td > GATE< / td > < td > 5th July< / td > < td > Free< / td > < td > Online< / td > < / tr > < tr > < td > DSA< / td > < td > 1st July< / td > < td > 2499< / td > < td > Online< / td > < / tr > < tr > < td > Java Backend< / td > < td > 28th March< / td > < td > 10999< / td > < td > Offline< / td > < / tr > < tr > < td > SDE< / td > < td > 1st Sept< / td > < td > 299< / td > < td > Online< / td > < / tr > < tr > < td > SUDO Placement< / td > < td > 20th Sept< / td > < td > Free< / td > < td > Online< / td > < / tr > < / tbody > < / table > < / body > < / html >

输出如下：

文章图片
例子2带有文本的标题, 然后是带有粘性标题的表格。

< !DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < meta http-equiv = "X-UA-Compatible" content = "ie=edge" /> < title > Document< / title > < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous" /> < script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous" > < / script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous" > < / script > < script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous" > < / script > < style > .header { position: sticky; top:0; } body { height: 800px; } < / style > < / head > < body > < table class = "table" > < thead style = "position: sticky; top: 0" class = "thead-dark" > < tr > < th class = "header" scope = "col" > Course< / th > < th class = "header" scope = "col" > Start Date< / th > < th class = "header" scope = "col" > Fees< / th > < th class = "header" scope = "col" > Type< / th > < / tr > < / thead > < tbody > < tr > < td > CAT< / td > < td > 1st Aug< / td > < td > Free< / td > < td > Online< / td > < / tr > < tr > < td > GATE< / td > < td > 5th July< / td > < td > Free< / td > < td > Online< / td > < / tr > < tr > < td > DSA< / td > < td > 1st July< / td > < td > 2499< / td > < td > Online< / td > < / tr > < tr > < td > Java Backend< / td > < td > 28th March< / td > < td > 10999< / td > < td > Offline< / td > < / tr > < tr > < td > SDE< / td > < td > 1st Sept< / td > < td > 299< / td > < td > Online< / td > < / tr > < tr > < td > SUDO Placement< / td > < td > 20th Sept< / td > < td > Free< / td > < td > Online< / td > < / tr > < / tbody > < / table > < / body > < / html >

输出如下：