我想固定表格的標題，表格存在于可滾動的div中，請在此處查看我的代碼：http : //jsfiddle.net/w7Mm8/114/請為我提供解決方案。謝謝我的代碼：<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貢獻1862條經驗 獲得超7個贊
您要做的是將表的內容與表的標題分開。您只希望<th>滾動元素。您可以使用<tbody>和<thead>元素輕松地在HTML中定義這種分隔。
現在，表頭和表主體仍相互連接，它們的寬度（和滾動屬性）仍相同?，F在，讓它們不再作為表“工作”，您可以設置display: block。這樣<thead>與<tbody>人分開。
table tbody, table thead
{
display: block;
}
現在，您可以將滾動條設置到表格的主體：
table tbody
{
overflow: auto;
height: 100px;
}
最后，由于<thead>不再與主體共享相同的寬度，因此您應該為表格的標題設置靜態寬度：
th
{
width: 72px;
}
您還應該為設置靜態寬度<td>。這解決了列未對齊的問題。
td
{
width: 72px;
}
請注意，您還缺少一些HTML元素。每行應位于一個<tr>元素中，該元素應包括標題行：
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
我希望這就是你的意思。
附錄
如果您想更好地控制列的寬度，讓它們之間的寬度互不相同，并確保標題和正文列保持對齊，則可以使用以下示例：
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貢獻1810條經驗 獲得超5個贊
我可以想到一個輕松的方法，我認為這不是最好的選擇，但它會起作用。
將標頭創建為單獨的表格，然后將另一個標頭放置在div中并設置最大尺寸，然后使用允許滾動進來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>
- 2 回答
- 0 關注
- 743 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消