1
Q
可滾動表格
A
回答
1
這是當前存在的AFAIK。根據您需要支持的瀏覽器，您可以使用CSS將overflow: scroll附加到tbody元素，但它不是正式在CSS規範中，只能半可靠地工作。 Firefox似乎理解它，我相信Chrome也會如此，但IE卻不予理睬。
1
1
如果你使用jQuery，有一個很好的插件可以做到這一點。你可以找到它here
1
我不瞭解你，但我需要可以處理動態寬度（和高度）的表格。 Firefox（< = 3.6）能夠很好地處理這個問題，並且沒有一個建議的框架似乎以一種清晰的方式處理這個問題。
https://bugzilla.mozilla.org/show_bug.cgi?id=552080
隨意對這個問題進行投票，並有Firefox的人重新思考自己的descition：太糟糕了火狐3.7，因爲他們把它叫做一個bug被移除這項功能。
1
我有一個很好的解決方案！ 試試這個，看看你是否能理解...... 這是所有關於CSS顯示...
<html>
<head>
<meta charset="UTF-8">
<title>Ex Scrollable Table</title>
<style type="text/css">
.divScroll
{
display:block;
overflow-x: hidden;
overflow-y: scroll;
-ms-overflow-x: hidden;
-ms-overflow-y: scroll;
height: 70px;
}
.Header
{
display:table-header-group;
}
.HeaderCell
{
text-align: left;
display: table-cell;
}
.FooterCell
{
display: table-cell;
text-align: left;
}
.Row
{
display:table-row;
}
.Cell
{
display: table-cell;
}
.Footer
{
display: table-footer-group;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="Header">
<div class="Row">
<div class="HeaderCell" style="width:140px;">Column1</div>
<div class="HeaderCell" style="width:90px;">Column2 </div>
<div class="HeaderCell" style="width:190px;">Column3</div>
<div class="HeaderCell" style="width:100px;">Column4</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="divScroll">
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
<div class="Row">
<div class="Cell" style="width:140px;">c1</div>
<div class="Cell" style="width:90px;">c2</div>
<div class="Cell" style="width:190px;">c3</div>
<div class="Cell" style="width:100px;">c4</div>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="Footer">
<div class="Row">
<div class="FooterCell" style="width:140px;">A</div>
<div class="FooterCell" style="width:90px;"> B</div>
<div class="FooterCell" style="width:190px;">C</div>
<div class="FooterCell" style="width:100px;">D</div>
</div>
</th>
</tr>
</tfoot>
</table>
</body>
</html>
相關問題
- 1. 使表格可以滾動到表格
- 2. 二維可滾動表格
- 3. 製作可滾動表格
- 4. Android可滾動表格
- 5. 滾動表格
- 6. HTML，CSS：使表格可垂直滾動
- 7. 打印可滾動vb.net表格
- 8. SWT - 製作表格可滾動
- 9. 如何創建可滾動表格？
- 10. HTML中可滾動的嵌套表格
- 11. 如何製作表格可滾動
- 12. wikitext中的可滾動表格
- 13. 使用jQuery的可滾動表格
- 14. 滾動HTML表格
- 15. 滾動HTML表格
- 16. 動態滾動表格
- 17. 不影響表格對齊的可滾動表格
- 18. 另一個表格內的可滾動表格
- 19. 在可滾動的div廣播表格中的寬表格
- 20. 可滾動表體
- 21. div可滾動固定格
- 22. 可滾動的固定格
- 23. 可滾動浮動圖表
- 24. 打印滾動表格
- 25. css水平滾動表格
- 26. 滾動在以HTML表格
- 27. 如何使以下表格單元格的內容可滾動？
- 28. 使用css的表格單元格內的可滾動div
- 29. 如何將x軸滾動條設置爲可移動表格
- 30. Android：如何製作凍結表頭的可滾動表格？
[這裏有一個小提琴（http://jsfiddle.net/PhillipSenn/ztTmv/）。感謝Carlos！ – 2014-02-12 15:16:09