表头固定，体可滚动

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

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

height: 10px !important; overflow: scroll;

例子:

当前回答

所有六个左右的CSS解决方案都假设一个短表。这些代码应该用几百行的代码进行测试。

2021-10-17 04:52:03

其他回答

迟到的派对(我的生活的故事)，但由于这是谷歌上的第一个结果，上面没有一个让我工作，下面是我的代码

/*Set a min width where your table start to look like crap*/
table { min-width: 600px; }

/*The next 3 sections make the magic happen*/
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

tbody {
    display: block;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Use the following to make sure cols align correctly*/
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}


/*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
    th:nth-child(1), td:nth-child(1) {
    width: 85px;
}
th:nth-child(2), td:nth-child(2) {
    width: 150px;
}
th:nth-child(4), td:nth-child(4) {
    width: 125px;
}
th:nth-child(5) {
    width: 102px;
}
td:nth-child(5) {
    width: 85px;
}

2017-04-23 05:47:34

我使用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

对于满高的表格(页面滚动，而不是表格)

注意:我移动整个<thead>…</ header >因为在我的例子中，我有两行(标题和过滤器)

使用JS (jQuery)

$( function() {

            let marginTop = 0; // Add margin if the page has a top nav-bar
            let $thead = $('.table-fixed-head').find('thead');
            let offset = $thead.first().offset().top - marginTop;
            let lastPos = 0;

            $(window).on('scroll', function () {

                if ( window.scrollY > offset )
                {
                    if ( lastPos === 0 )
                    {
                        // Add a class for styling
                        $thead.addClass('floating-header');
                    }

                    lastPos = window.scrollY - offset;
                    $thead.css('transform', 'translateY(' + ( lastPos ) + 'px)');
                }
                else if ( lastPos !== 0 )
                {
                    lastPos = 0;
                    $thead.removeClass('floating-header');
                    $thead.css('transform', 'translateY(' + 0 + 'px)');
                }
            });
});

CSS(仅用于样式)

 thead.floating-header>tr>th {
       background-color: #efefef;
 }

thead.floating-header>tr:last-child>th {
       border-bottom: 1px solid #aaa;
}

2019-05-23 11:30:30

在一个窗口中支持多个可滚动表。

纯CSS &没有固定或粘性。

我正在搜索固定的表头与自动“td”和“th”宽度多年。最后我写了一些东西，这对我来说很好，但我不确定它对每个人都很好。

问题1:当我们有大量的“tr”时，我们不能设置表或表体高度，这是因为默认的表属性。

解决方法:为表设置一个显示属性。

问题2:当我们设置显示属性时，“td”元素的宽度不能等于“th”元素的宽度。而且在全宽表中很难正确地填充元素，比如100%。

解决方案:CSS“flex”是宽度和填充设置的很好的解决方案，所以我们将用CSS“flex”构建我们的tbody和thead元素。

.ea_table { border: 1px solid #ddd; display: block; background: #fff; overflow-y: hidden; box-sizing: border-box; float: left; height:auto; width: 100%; } .ea_table tbody, thead { flex-direction: column; display: flex; } .ea_table tbody { height: 300px; overflow: auto; } .ea_table thead { border-bottom: 1px solid #ddd; } .ea_table tr { display: flex; } .ea_table tbody tr:nth-child(2n+1) { background: #f8f8f8; } .ea_table td, .ea_table th { text-align: left; font-size: 0.75rem; padding: 1.5rem; flex: 1; } <table class="ea_table"> <thead> <tr> <th>Something Long</th> <th>Something </th> <th>Something Very Long</th> <th>Something Long</th> <th>Some</th> </tr> </thead> <tbody> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem </td> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> </tbody> </table>

斯菲德尔

2019-06-26 02:26:56

首先为引导表添加一些标记。在这里，我创建了一个条纹表，但也添加了一个自定义表类.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

表头固定，体可滚动

推荐文章

最新文章

标签