table表头固定

复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>固定表格表头</title>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
div {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100px;
    margin-top: 5px;
    margin-left: 12px;
    padding-top: -2px;
    padding-bottom: 5px;
    border: 3px solid #009933;
}

table {
    width: 100%;
    border-color: #d2f1ac;
    border-collapse: collapse;
    border-top: 0px solid #ffffff;
}

.fixedtd {
    position: relative;
    z-index: 1;
    background: #009933;
    text-align: center;
}
</style>
</head>
<body>
    <div>
        <table border="1">
            <tr>
                <td class="fixedtd">固定表头第一列</td>
                <td class="fixedtd">固定表头第二列</td>
                <td class="fixedtd">固定表头第三列</td>
                <td class="fixedtd">固定表头第四列</td>
                <td class="fixedtd">固定表头第五列</td>
                <td class="fixedtd">固定表头第六列</td>
            </tr>
            <tr>
                <td>A1</td>
                <td>A2</td>
                <td>A3</td>
                <td>A4</td>
                <td>A5</td>
                <td>A6</td>
            </tr>
            <tr>
                <td>B1</td>
                <td>B2</td>
                <td>B3</td>
                <td>B4</td>
                <td>B5</td>
                <td>B6</td>
            </tr>
            <tr>
                <td>C1</td>
                <td>C2</td>
                <td>C3</td>
                <td>C4</td>
                <td>C5</td>
                <td>C6</td>
            </tr>
            <tr>
                <td>D1</td>
                <td>D2</td>
                <td>D3</td>
                <td>D4</td>
                <td>D5</td>
                <td>D6</td>
            </tr>
            <tr>
                <td>E1</td>
                <td>E2</td>
                <td>E3</td>
                <td>E4</td>
                <td>E5</td>
                <td>E6</td>
            </tr>
            <tr>
                <td>F1</td>
                <td>F2</td>
                <td>F3</td>
                <td>F4</td>
                <td>F5</td>
                <td>F6</td>
            </tr>
            <tr>
                <td>G1</td>
                <td>G2</td>
                <td>G3</td>
                <td>G4</td>
                <td>G5</td>
                <td>G6</td>
            </tr>
            <tr>
                <td>H1</td>
                <td>H2</td>
                <td>H3</td>
                <td>H4</td>
                <td>H5</td>
                <td>H6</td>
            </tr>
        </table>
    </div>
</body>
</html>
复制代码

 

posted @   岁月淡忘了谁  阅读(368)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示