css实现table锁定表头

在做项目中,碰到表格数据全部加载,不要分页,就需要锁定表头的业务。自己也上网搜了一些资料,
1.css+html实现
一般的思路就是两个table拼接,不过问题是上下表单可能对不齐
2.js实现
一般的思路是重新创建表头,表头浮动
在这里css+html实现:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css+html实现固定表头</title>
<style type="text/css"> #scrollTable { width:701px; border: 1px solid #EB8;/*table没有外围的border,只有内部的td或th有border*/ background: #FF8C00; } #scrollTable table { border-collapse:collapse; /*统一设置两个table为细线表格*/ } /*表头 div的第一个子元素**/ #scrollTable table.thead{ width:100%; } /*表头*/ #scrollTable table.thead th{ border: 1px solid #EB8; border-right:#C96; color:#fff; background: #FF8C00;/*亮桔黄色*/ } /*能带滚动条的表身*/ /*div的第二个子元素*/ #scrollTable div{ width:100%; height:200px; overflow:auto;/*必需*/ scrollbar-face-color:#EB8;/*那三个小矩形的背景色*/ scrollbar-base-color:#ece9d8;/*那三个小矩形的前景色*/ scrollbar-arrow-color:#FF8C00;/*上下按钮里三角箭头的颜色*/ scrollbar-track-color:#ece9d8;/*滚动条的那个活动块所在的矩形的背景色*/ scrollbar-highlight-color:#800040;/*那三个小矩形左上padding的颜色*/ scrollbar-shadow-color:#800040;/*那三个小矩形右下padding的颜色*/ scrollbar-3dlight-color: #EB8;/*那三个小矩形左上border的颜色*/ scrollbar-darkshadow-Color:#EB8;/*那三个小矩形右下border的颜色*/ } /*能带滚动条的表身的正体*/ #scrollTable table.tbody{ width:100%; border: 1px solid #C96; border-right:#B74; color:#666666; background: #ECE9D8; } /*能带滚动条的表身的格子*/ #scrollTable table.tbody td{ border:1px solid #C96; } </style>

</head>
<body>

<div id="scrollTable">
    <table class="thead">
        <col width="170px"></col> 
        <col width="170px"></col> 
        <col width="170px"></col>
        <col></col>
        <tbody>
            <tr>
                <th>名称</th>
                <th>语法</th>
                <th>说明</th>
                <th>例子</th>
            </tr>
      </tbody>
    </table>
    <div>
      <table class="tbody"> 
      <col width="170px"></col> <col width="170px"></col> <col width="170px"></col><col></col>
        <tbody>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
        </tbody>
      </table>
    </div>
</div>
</body>
</html>

页面效果:
css实现table锁定表头_第1张图片

你可能感兴趣的:(html,table)