前端开发 | 在线支持

先定义固定表头的CSS表格的区域，即设置宽与高，其中宽度包含滚动条的宽度，并设置overflow为hidden。设置thead的display为block，即定义其为块内元素。重点设置table内容的overflow属性为auto，即可滚动.其他部分分别定义th、a、td元素的样式。

【示例】

HTML

<div id="tableContainer" class="tableContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
        <thead class="fixedHeader">
            <tr class="alternateRow">
                <th><a href="#">固定表头 1</a></th>
                <th><a href="#">固定表头 2</a></th>
                <th><a href="#">固定表头 3</a></th>
            </tr>
        </thead>
        <tbody class="scrollContent">
            <tr class="normalRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="alternateRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="normalRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="alternateRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="normalRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="alternateRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="normalRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="alternateRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="normalRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="alternateRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="normalRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="alternateRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="normalRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="alternateRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="normalRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="alternateRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="normalRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="alternateRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="normalRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="alternateRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="normalRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="alternateRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="normalRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="alternateRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="normalRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
            <tr class="alternateRow">
                <td>固定表头的CSS表格 1</td>
                <td>固定表头的CSS表格 2</td>
                <td>固定表头的CSS表格 3</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

/* 基本样式{{ */
body {
    background: #FFF;
    color: #000;
    font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 10px;
    padding: 0
}
table, td, a {
    color: #000;
    font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
h1 {
    font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 0 0 5px 0
}
h2 {
    font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 0 0 5px 0
}
h3 {
    font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #008000;
    margin: 0 0 15px 0
}
/* 基本样式}} */

/*定义可滚动区域宽、高样式，其中，增加滚动条的16px*/
div.tableContainer {
    clear: both;
    border: 1px solid #963;
    height: 285px;
    overflow: auto;
    width: 756px
}
/* 定义overflow为hidden */
html>body div.tableContainer {
    overflow: hidden;
    width: 756px
}
/* 定义表格宽度 */
div.tableContainer table {
    float: left;
    width: 740px
}
/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table { width: 756px }
thead.fixedHeader tr { position: relative }
/*设置thead样式*/
html>body thead.fixedHeader tr { display: block }
/*定义th样式*/
thead.fixedHeader th {
    background: #C96;
    border-left: 1px solid #EB8;
    border-right: 1px solid #B74;
    border-top: 1px solid #EB8;
    font-weight: normal;
    padding: 4px 3px;
    text-align: left
}
/*定义a元素样式*/
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
    color: #FFF;
    display: block;
    text-decoration: none;
    width: 100%
}
/*a:hover样式*/
thead.fixedHeader a:hover {
    color: #FFF;
    display: block;
    text-decoration: underline;
    width: 100%
}
/*定义表格内容可滚动样式，tbody元素为块级元素*/
html>body tbody.scrollContent {
    display: block;
    height: 262px;
    overflow: auto;
    width: 100%
}
/*td元素样式*/
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
    background: #FFF;
    border-bottom: none;
    border-left: none;
    border-right: 1px solid #CCC;
    border-top: 1px solid #DDD;
    padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
    background: #EEE;
    border-bottom: none;
    border-left: none;
    border-right: 1px solid #CCC;
    border-top: 1px solid #DDD;
    padding: 2px 3px 3px 4px
}
/*th样式*/
html>body thead.fixedHeader th { width: 200px }
html>body thead.fixedHeader th + th { width: 240px }
html>body thead.fixedHeader th + th + th { width: 316px }
/*td元素样式*/
html>body tbody.scrollContent td { width: 200px }
html>body tbody.scrollContent td + td { width: 240px }
html>body tbody.scrollContent td + td + td { width: 300px }

下载源代码