我试图使一个表与固定标题和一个可滚动的内容使用引导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>
迟到的派对(我的生活的故事),但由于这是谷歌上的第一个结果,上面没有一个让我工作,下面是我的代码
/*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;
}
根据@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,上面的代码段将正常工作