带有固定标题的可滚动表

问题描述：

我为此搜索了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>

带有固定标题的可滚动表

相关推荐