我试图使一个表与固定标题和一个可滚动的内容使用引导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>
根据@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，上面的代码段将正常工作
您可以放置两个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>
在一个窗口中支持多个可滚动表。
纯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>
斯菲德尔
