表头固定，体可滚动

我试图使一个表与固定标题和一个可滚动的内容使用引导3表。不幸的是，我发现的解决方案不工作与bootstrap或混乱的风格。

这里有一个简单的bootstrap表，但由于某种原因，我不知道tbody的高度不是10px。

height: 10px !important; overflow: scroll;

例子:

当前回答

我使用floatThead jQuery插件(https://mkoryak.github.io/floatThead/#intro)

文档说它适用于Bootstrap 3表，我可以说它也适用于Bootstrap 4表，有或没有表响应帮助。

使用插件就像这样简单:

HTML(普通引导表标记)

<div class="table-responsive">
   <table id="myTable" class="table table-striped">
        <thead>...</thead>
        <tbody>...</tbody>
   </table>
</div>

插件初始化:

$(document).ready(function() {
    var tbl=$('#myTable');
    tbl.floatThead({
        responsiveContainer: function(tbl) {
            return tbl.closest('.table-responsive');
        }
    });
});

完整的免责声明: 我没有以任何方式与插件相关联。在尝试了这里和其他地方发布的许多其他解决方案后，我碰巧发现了它。

2019-05-07 18:43:15

其他回答

table { overflow-y: auto; height: 50vh; /* !!! HEIGHT MUST BE IN [ vh ] !!! */ } thead th { background-color: white; position: sticky; top: 0; } <table> <thead> <tr><th>TH 1</th><th>TH 2</th></tr> </thead> <tbody> <tr><td>A1</td><td>A2</td></tr> <tr><td>B1</td><td>B2</td></tr> <tr><td>C1</td><td>C2</td></tr> <tr><td>D1</td><td>D2</td></tr> <tr><td>E1</td><td>E2</td></tr> <tr><td>F1</td><td>F2</td></tr> <tr><td>G1</td><td>G2</td></tr> <tr><td>H1</td><td>H2</td></tr> <tr><td>I1</td><td>I2</td></tr> <tr><td>J1</td><td>J2</td></tr> <tr><td>K1</td><td>K2</td></tr> <tr><td>L1</td><td>L2</td></tr> <tr><td>M1</td><td>M2</td></tr> <tr><td>N1</td><td>N2</td></tr> <tr><td>O1</td><td>O2</td></tr> <tr><td>P1</td><td>P2</td></tr> <tr><td>Q1</td><td>Q2</td></tr> <tr><td>R1</td><td>R2</td></tr> <tr><td>S1</td><td>S2</td></tr> <tr><td>T1</td><td>T2</td></tr> <tr><td>U1</td><td>U2</td></tr> <tr><td>V1</td><td>V2</td></tr> <tr><td>W1</td><td>W2</td></tr> <tr><td>X1</td><td>X2</td></tr> <tr><td>Y1</td><td>Y2</td></tr> <tr><td>Z1</td><td>Z2</td></tr> </tbody> </table>

你不需要js。重要的是设置表格高度[vh]

2020-02-13 19:14:30

您可以放置两个div，其中第一个div(标题)将有透明的滚动条和第二个div将有数据与可见/自动滚动条。示例中有用于遍历数据的角代码片段。

下面的代码为我工作-

<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
    <div class="row">
        <div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
        <div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
        <div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
    </div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
    <div>
        <div class="row" ng-repeat="row in rows">
            <div class="col-lg-3 col-xs-3">{{row.col1}}</div>
            <div class="col-lg-6 col-xs-6">{{row.col2}}</div>
            <div class="col-lg-3 col-xs-3">{{row.col3}}</div>
        </div>
    </div>
</div>

隐藏标题滚动条的附加样式

<style>
        #transparentScrollbarDiv::-webkit-scrollbar {
            width: inherit;
        }

        /* this targets the default scrollbar (compulsory) */

        #transparentScrollbarDiv::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* the new scrollbar will have a flat appearance with the set background color */

        #transparentScrollbarDiv::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        /* this will style the thumb, ignoring the track */

        #transparentScrollbarDiv::-webkit-scrollbar-button {
            background-color: transparent;
        }

        /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

        #transparentScrollbarDiv::-webkit-scrollbar-corner {
            background-color: transparent;
        }

        /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
    </style>

2015-11-30 22:04:00

根据@Roko C. Buljan的回答，如果你尝试添加行跨度，当你滚动时，只有第一个th会被固定。

.tableFixHead { overflow: auto; height: 100px; } .tableFixHead thead th { position: sticky; top: 0; z-index: 1; } /* Just common table stuff. Really. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; } th { background:#eee; } <div class="tableFixHead"> <table> <thead> <tr> <th rowspan="3">TH 1</th> <th>TH 2.1</th> <th>TH 3.1</th> </tr> <tr > <th>TH 2.2</th> <th>TH 3.2</th> </tr> <tr > <th>TH 2.3</th> <th>TH 3.3</th> </tr> </thead> <tbody> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>E1</td><td>E2</td><td>E3</td></tr> </tbody> </table> </div>

如果你想固定行跨度，你可以添加这行

.tableFixHead thead tr:nth-child(2) th {
    top: 34px; /* change the number according to your need  */
}

.tableFixHead thead tr:nth-child(3) th {
    top: 68px; /* change the number according to your need  */
}

作为示例，您可以检查这个片段

.tableFixHead { overflow: auto; height: 200px; } .tableFixHead thead th { position: sticky; top: 0; z-index: 1; } .tableFixHead thead tr:nth-child(2) th { top: 34px; /* change the number according to your need */ } .tableFixHead thead tr:nth-child(3) th { top: 68px; /* change the number according to your need */ } /* Just common table stuff. Really. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; } th { background:#eee; } <div class="tableFixHead"> <table> <thead> <tr> <th rowspan="3">TH 1</th> <th>TH 2.1</th> <th>TH 3.1</th> </tr> <tr > <th>TH 2.2</th> <th>TH 3.2</th> </tr> <tr > <th>TH 2.3</th> <th>TH 3.3</th> </tr> </thead> <tbody> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>E1</td><td>E2</td><td>E3</td></tr> </tbody> </table> </div>

如果你用n -child(number)手动指定number，上面的代码段将正常工作

2022-02-28 07:21:34

更新

对于更新的和仍然维护的库尝试jquery。而不是floatThead(正如Bob Jordan在评论中提到的)。

旧的答案

这是一个很古老的答案，下面提到的图书馆已经不再维护了。

我在GitHub上使用StickyTableHeaders，它像魅力一样工作!

我必须添加这个css，使头部不透明。

table#stickyHeader thead {
  border-top: none;
  border-bottom: none;
  background-color: #FFF;
}

2014-12-17 17:38:05

首先为引导表添加一些标记。在这里，我创建了一个条纹表，但也添加了一个自定义表类.table-scroll，它添加了垂直滚动条到表，并使表头固定，而向下滚动。

<div class="col-xs-8 col-xs-offset-2 well">
    <table class="table table-scroll table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>County</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Andrew</td>
                <td>Jackson</td>
                <td>Washington</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Thomas</td>
                <td>Marion</td>
                <td>Jackson</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Benjamin</td>
                <td>Warren</td>
                <td>Lincoln</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Grant</td>
                <td>Wayne</td>
                <td>Union</td>
            </tr>
            <tr>
                <td>5</td>
                <td>John</td>
                <td>Adams</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Morgan</td>
                <td>Lee</td>
                <td>Lake</td>
            </tr>
            <tr>
                <td>7</td>
                <td>John</td>
                <td>Henry</td>
                <td>Brown</td>
            </tr>
            <tr>
                <td>8</td>
                <td>William</td>
                <td>Jacob</td>
                <td>Orange</td>
            </tr>
            <tr>
                <td>9</td>
                <td>Kelly</td>
                <td>Davidson</td>
                <td>Taylor</td>
            </tr>
            <tr>
                <td>10</td>
                <td>Colleen</td>
                <td>Hurst</td>
                <td>Randolph</td>
            </tr>
            <tr>
                <td>11</td>
                <td>Rhona</td>
                <td>Herrod</td>
                <td>Cumberland</td>
            </tr>
            <tr>
                <td>12</td>
                <td>Jane</td>
                <td>Paul</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>13</td>
                <td>Ashton</td>
                <td>Fox</td>
                <td>Calhoun</td>
            </tr>
            <tr>
                <td>14</td>
                <td>Garrett</td>
                <td>John</td>
                <td>Madison</td>
            </tr>
            <tr>
                <td>15</td>
                <td>Fredie</td>
                <td>Winters</td>
                <td>Washington</td>
            </tr>
        </tbody>
    </table>
</div>

css

.table-scroll tbody {
    position: absolute;
    overflow-y: scroll;
    height: 250px;
}

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

.table-scroll thead > tr > th {
    border: none;
}

2018-09-13 05:33:39

表头固定，体可滚动

推荐文章

最新文章

标签