表固定標(biāo)頭和可滾動(dòng)體我試圖使用引導(dǎo)3表創(chuàng)建一個(gè)具有固定標(biāo)題和可滾動(dòng)內(nèi)容的表。不幸的是，我找到的解決方案不適用于引導(dǎo)，也不能破壞樣式。這里有一個(gè)簡(jiǎn)單的引導(dǎo)表，但由于某種原因，tbody的高度不是10 px。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>
3 回答
隔江千里
TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超10個(gè)贊
<table class="table table-striped header-fixed"></table>
CSS
.header-fixed {
width: 100% }.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;}.header-fixed > tbody > tr:after,.header-fixed > thead > tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;}.header-fixed > tbody {
overflow-y: auto;
height: 150px;}.header-fixed > tbody > tr > td,.header-fixed > thead > tr > th {
width: 20%;
float: left;}添加回答
舉報(bào)
0/150
提交
取消