带有固定标题的可滚动表 [英] Scrollable table with fixed header
本文介绍了带有固定标题的可滚动表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我为此搜索了PHP / HTML / CSS中的一些解决方案，但到目前为止没有任何工作，可能是因为在大多数这些示例中都有太多的代码，所以我迷失了它。有人可以向我解释我需要做什么或在这里放一些简单的示例代码吗？
I searched for some solutions in PHP/HTML/CSS for this, but nothing worked so far, maybe because in most of those examples were sooo much of code so I got lost in it. Could someone explain to me what I need to do or put some simple sample code here?
推荐答案
此代码（取自链接在你的评论中）是你需要的基本代码。下次你需要弄清楚那种事情时，只需删除一段代码，看看有什么破坏，并省去所有不会破坏你需要的东西。
This code (taken from the link in your comment) is the basic code you need. Next time you need to figure that kind of thing out, just remove segments of code to see what breaks, and leave out everything that doesn't break something that you need.
<html>
<head>
<style>
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px; /* html>body tbody.scrollContent height plus 23px for the header */
overflow: auto;
width: 756px /* Remember to leave 16px for the scrollbar! */
}
html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%
}
html>body thead.fixedHeader tr {
display: block
}
html>body thead.fixedHeader th { /* TH 1 */
width: 200px
}
html>body thead.fixedHeader th + th { /* TH 2 */
width: 240px
}
html>body thead.fixedHeader th + th + th { /* TH 3 +16px for scrollbar */
width: 316px
}
html>body tbody.scrollContent td { /* TD 1 */
width: 200px
}
html>body thead.scrollContent td + td { /* TD 2 */
width: 240px
}
html>body thead.scrollContent td + td + td { /* TD 3 +16px for scrollbar */
width: 316px
}
</style>
</head>
<body>
<div id="tableContainer" class="tableContainer">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="scrollTable">
<thead class="fixedHeader">
<tr class="alternateRow">
<th><a href="#">Header 1</a></th>
<th><a href="#">Header 2</a></th>
<th><a href="#">Header 3</a></th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
.........
</tbody>
</table>
</div>
</body>
</html>
这篇关于带有固定标题的可滚动表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
