我想固定表格的標(biāo)題，表格存在于可滾動(dòng)的div中，請(qǐng)?jiān)诖颂幉榭次业拇a：http : //jsfiddle.net/w7Mm8/114/請(qǐng)為我提供解決方案。謝謝我的代碼：<div style="position: absolute; height: 200px; overflow: auto; "> <div style="height: 250px;"> <table border="1"> <th>head1</th> <th>head2</th> <th>head3</th> <th>head4</th> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 2</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> <td>row 1, cell 2</td> <td>row 1, cell 2</td> </tr> </table> </div></div>
2 回答
牧羊人nacy
TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超7個(gè)贊
您要做的是將表的內(nèi)容與表的標(biāo)題分開。您只希望<th>滾動(dòng)元素。您可以使用<tbody>和<thead>元素輕松地在HTML中定義這種分隔。
現(xiàn)在，表頭和表主體仍相互連接，它們的寬度（和滾動(dòng)屬性）仍相同。現(xiàn)在，讓它們不再作為表“工作”，您可以設(shè)置display: block。這樣<thead>與<tbody>人分開。
table tbody, table thead
{
display: block;
}
現(xiàn)在，您可以將滾動(dòng)條設(shè)置到表格的主體：
table tbody
{
overflow: auto;
height: 100px;
}
最后，由于<thead>不再與主體共享相同的寬度，因此您應(yīng)該為表格的標(biāo)題設(shè)置靜態(tài)寬度：
th
{
width: 72px;
}
您還應(yīng)該為設(shè)置靜態(tài)寬度<td>。這解決了列未對(duì)齊的問題。
td
{
width: 72px;
}
請(qǐng)注意，您還缺少一些HTML元素。每行應(yīng)位于一個(gè)<tr>元素中，該元素應(yīng)包括標(biāo)題行：
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
我希望這就是你的意思。
附錄
如果您想更好地控制列的寬度，讓它們之間的寬度互不相同，并確保標(biāo)題和正文列保持對(duì)齊，則可以使用以下示例：
table th:nth-child(1), td:nth-child(1) { min-width: 50px; max-width: 50px; }
table th:nth-child(2), td:nth-child(2) { min-width: 100px; max-width: 100px; }
table th:nth-child(3), td:nth-child(3) { min-width: 150px; max-width: 150px; }
table th:nth-child(4), td:nth-child(4) { min-width: 200px; max-width: 200px; }
分享編輯
森欄
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超5個(gè)贊
我可以想到一個(gè)輕松的方法，我認(rèn)為這不是最好的選擇，但它會(huì)起作用。
將標(biāo)頭創(chuàng)建為單獨(dú)的表格，然后將另一個(gè)標(biāo)頭放置在div中并設(shè)置最大尺寸，然后使用允許滾動(dòng)進(jìn)來overflow。
table {
width: 500px;
}
.scroll {
max-height: 60px;
overflow: auto;
}
<table border="1">
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</table>
<div class="scroll">
<table>
<tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
<tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
<tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
<tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
<tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
<tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
<tr><td>More Text</td><td>More Text</td><td>More Text</td><td>More Text</td></tr>
<tr><td>Text Text</td><td>Text Text</td><td>Text Text</td><td>Text Text</td></tr>
<tr><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td><td>Even More Text Text</td></tr>
</table>
</div>
添加回答
舉報(bào)
0/150
提交
取消