我试图使一个表与固定标题和一个可滚动的内容使用引导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>
对于纯CSS方法，你需要一个带有overflow-y: auto;并决定如何隐藏滚动/溢出行:
覆盖一个不透明的粘头(位置:粘;上图:0;z-index: 1;)，就像@RokoCBuljan的答案一样。
切换行可见性(通过如下所示在属性后设置tr:)。
注意容器可以是一个外部<div>，或者<table>本身，或者它的一部分(例如<tbody>)。后面两个你需要设置display: block;所以实际上他们被当成了潜水者。
请看下面一个修改后的@giulio的解决方案:
:root {
--height-height: 150px;
/* cell width has to reserve some space for scrolling. Hence the sum < 100% */
--cell-width: 85px;
}
.header-fixed {
width: 200px;
}
/* Treat all as divs */
.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
display: block;
}
/* Prevent header to wrap */
.header-fixed > thead > tr > th {
white-space: nowrap;
background-color: lightgrey;
}
.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
.header-fixed > tbody {
overflow-y: auto;
height: var(--height-height);
}
.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
width: var(--cell-width);
border: thin solid grey;
float: left;
}
<table class="header-fixed">
<thead>
<tr> <th>Header 1</th> <th>Header 2</th> </tr>
</thead>
<tbody>
<tr> <td>cell 11</td> <td>cell 12</td> </tr>
<tr> <td>cell 21</td> <td>cell 22</td> </tr>
<tr> <td>cell 31</td> <td>cell 32</td> </tr>
<tr> <td>cell 41</td> <td>cell 42</td> </tr>
<tr> <td>cell 51</td> <td>cell 52</td> </tr>
<tr> <td>cell 61</td> <td>cell 62</td> </tr>
<tr> <td>cell 71</td> <td>cell 72</td> </tr>
<tr> <td>cell 81</td> <td>cell 82</td> </tr>
<tr> <td>cell 91</td> <td>cell 92</td> </tr>
</tbody>
</table>
注意:如果你有>2列，你需要相应地摆弄var(——cell-width)变量。
一种没有固定宽度的简单方法:
.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'));
});
在一个窗口中支持多个可滚动表。
纯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>
斯菲德尔
