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

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

height: 10px !important; overflow: scroll;

例子:

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <table class="table table-striped"> <thead> <tr> <th>Make</th> <th>Model</th> <th>Color</th> <th>Year</th> </tr> </thead> <tbody style="height: 10px !important; overflow: scroll; "> <tr> <td class="filterable-cell">111 Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> </tbody> </table>


当前回答

以下是有效的解决方案:

table { width: 100%; } thead, tbody, tr, td, th { display: block; } tr:after { content: ' '; display: block; visibility: hidden; clear: both; } thead th { height: 30px; /*text-align: left;*/ } tbody { height: 120px; overflow-y: auto; } thead { /* fallback */ } tbody td, thead th { width: 19.2%; float: left; } <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-striped"> <thead> <tr> <th>Make</th> <th>Model</th> <th>Color</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> </tbody> </table>

链接到jsfiddle

其他回答

一种没有固定宽度的简单方法:

.myTable tbody{
  display:block;
  overflow:auto;
  height:200px;
  width:100%;
}
.myTable thead tr{
  display:block;
}

现在,在onLoad上,调整宽度,只需添加这个jquery脚本:

$.each($('.myTable tbody tr:nth(0) td'), function(k,v) {
    $('.myTable thead th:nth('+k+')').css('width', $(v).css('width'));
});

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

/*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;
}

我使用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');
        }
    });
});

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

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

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

斯菲德尔

不需要用div包装它…

CSS:

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

table{
 height:300px;              // <-- Select the height of the table
 display: block;
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Bootply: https://www.codeply.com/p/nkaQFc713a