我試圖用CSS在引導(dǎo)表上創(chuàng)建一個(gè)固定的標(biāo)題。
半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)
table.scroll tbody, table.scroll thead {
display: block;
}
table.scroll tbody {
height: 600px;
overflow-y: auto;
overflow-x: hidden;
}
超文本標(biāo)記語言
<table id="standart_list" class="table table-bordered scroll">
<thead>
<tr>
<th>Standart Kodu</th>
<th>Standart Tan?m?</th>
<th>Standart(Asgari ?art)</th>
<th>Standart Durum Kar??lan?yor Mu?</th>
<th>Mevcut Durum</th>
<th>A??klama</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#7fffd4">
<td>
ADL? TIP
</td>
</tr>
<tr>
<input type="hidden" name="brans_2882" value="2">
<td>
2.1.1
</td>
<td style="max-width: 600px">
E??T?C? SAYISI
</td>
<td>
1
</td>
<td>
<select name="select_2882" id="select_2882" class="form-control">
<option value="1">Evet</option>
<option value="0" selected="">Hay?r</option>
</select>
</td>
<td>
<input type="text" name="input_2882" id="input_2882" value="0" class="form-control mevcut_durum numeric" required="">
<span class="errmsg"></span>
</td>
<td>
<textarea name="text_2882" id="text_2882" class="form-control aciklama" required="">bu büyüklü?e</textarea>
</td>
</tr>
</tbody>
</table>
& lttbody & gt看起來不錯(cuò),滾動(dòng)工作。但是& ltthead & gt元素沒有與& lttbody & gt。
我該如何解決這個(gè)問題?
這是看起來像描述的屏幕:
謝謝!
# # #下面的代碼可以在比IE9新的瀏覽器上運(yùn)行,不幸的是,要讓它在舊的瀏覽器上運(yùn)行,你需要使用固定的列寬。 來源:我的答案的來源頁面
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 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.scroll tbody,
table.scroll thead { display: block; }
# # #我在以前的stackoverflow帖子中找到了解決方案。 引導(dǎo)程序中帶有固定標(biāo)題的可滾動(dòng)表格,第二條注釋中有解決方案。
另一個(gè)解決方案: 如何在html表格上顯示滾動(dòng)條
# # #只需將這行代碼添加到您的tabel標(biāo)簽中,就可以解決這個(gè)問題
<table data-toggle="table" id="standart_list" class="table table-bordered scroll">[enter image description here][1]