表头固定Demo(Div+Css)

来源：互联网发布：网站域名服务器多少钱编辑：程序博客网时间：2024/05/16 04:59

<!doctype html />
<html>
<head>
<title>表头固定Demo</title>
    <style type="text/css">
        .frozenHeadTable
        {
         width:821px;
         border-right:1px solid blue;
        }
        .frozenHeadTable .headTable
        {
         width:100%;
         border-collapse:collapse;
        }
        .frozenHeadTable .headTable th
        {
         border-left:1px solid blue;
         border-top:1px solid blue;
         border-bottom:1px solid blue;
         height:25px;
         background-color:#EB8000;
         color:White;
        }
        .frozenHeadTable .bodyTable
        {
         width:100%;
         border-collapse:collapse;
        }
        .frozenHeadTable .bodyTable td
        {
         border-left:1px solid blue;
         border-bottom:1px solid blue;
         height:25px;
         background-color:#ECE9D8;
        }
        .frozenHeadTable .bodyDiv
        {
         width:100%;
         overflow:auto;
         max-height:195px;
        }
    </style>
</head>
<body>
    <div>
        说明：<br />
        表格为4*10，即4行10列，每列宽200px，共800px，<br />
        滚动条在各浏览器默认宽度为16px，<br />
        width是不包含border在内的，4列就有5个纵向的border，共5px<br />
        宽总共821px。<br />
        通过调整.frozenHeadTable .bodyDiv内的max-height可以控制滚动条是否出现。<br /><br />
    </div>
    <div class="frozenHeadTable">
        <table class="headTable">
            <col style="width:200px" />
            <col style="width:200px" />
            <col style="width:200px" />
            <col />
            <tbody>
                <tr><th>学号</th><th>姓名</th><th>数学成绩</th><th>语文成绩</th></tr>
            </tbody>
        </table>
        <div class="bodyDiv">
            <table class="bodyTable">
                <col style="width:200px" />
                <col style="width:200px" />
                <col style="width:200px" />
                <col />
                <tbody>
                    <tr><td>20120001</td><td>王成</td><td>100</td><td>90</td></tr>
                    <tr><td>20120002</td><td>徐雅南</td><td>100</td><td>90</td></tr>
                    <tr><td>20120003</td><td>吉凡</td><td>100</td><td>90</td></tr>
                    <tr><td>20120004</td><td>鞠影</td><td>100</td><td>90</td></tr>
                    <tr><td>20120005</td><td>张天伟</td><td>100</td><td>90</td></tr>
                    <tr><td>20120006</td><td>蒋林毅</td><td>100</td><td>90</td></tr>
                    <tr><td>20120007</td><td>刘全洪</td><td>100</td><td>90</td></tr>
                    <tr><td>20120008</td><td>郭俊浩</td><td>100</td><td>90</td></tr>
                    <tr><td>20120009</td><td>王宝</td><td>100</td><td>90</td></tr>
                    <tr><td>20120010</td><td>赵鑫慧</td><td>100</td><td>90</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

0 0