常用的固定表头的几种做法

最新推荐文章于 2024-03-25 18:56:01 发布

TrampEagle

最新推荐文章于 2024-03-25 18:56:01 发布

阅读量1.1k

点赞数

分类专栏：学习杂记文章标签： table border class scroll div html

本文链接：https://blog.csdn.net/TrampEagle/article/details/661796

版权

这几天修改列表的样式风格，提到了列表表头的固定方法，总结一下常见的几种：
第一种感觉最简单的就是分放在两个<table/>标签里，这样只控制不含有标题的那个<table/>，代码如下:

<table width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#0099CC">
<tr>
    <th width="25%" nowrap><font color="#FFFFFF">标题一</font></th>
    <th width="25%" nowrap><font color="#FFFFFF">标题二</font></th>
    <th width="25%" nowrap><font color="#FFFFFF">标题三</font></th>
    <th width="25%" nowrap><font color="#FFFFFF">标题四</font></th>
</tr>
</table>
<span style="overflow-y:auto;height:100px;width:320px">
<table width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#0099CC">
<tr bgcolor="#FFFFFF">
    <td width="25%"> 1</td>

    <td width="25%"> 2</td>

    <td width="25%"> 3</td>

    <td width="25%"> 4</td>
        </tr>
<tr bgcolor="#FFFFFF">
    <td width="25%"> 1</td>

    <td width="25%"> 2</td>

    <td width="25%"> 3</td>

    <td width="25%"> 4</td>
        </tr>
<tr bgcolor="#FFFFFF">
    <td width="25%"> 1</td>

    <td width="25%"> 2</td>

    <td width="25%"> 3</td>

    <td width="25%"> 4</td>
        </tr>
<tr bgcolor="#FFFFFF">
    <td width="25%"> 1</td>

    <td width="25%"> 2</td>

    <td width="25%"> 3</td>

    <td width="25%"> 4</td>
        </tr>
<tr bgcolor="#FFFFFF">
    <td width="25%"> 1</td>

    <td width="25%"> 2</td>

    <td width="25%"> 3</td>

    <td width="25%"> 4</td>
        </tr>
<tr bgcolor="#FFFFFF">
    <td width="25%"> 1</td>

    <td width="25%"> 2</td>

    <td width="25%"> 3</td>

    <td width="25%"> 4</td>
        </tr>
<tr bgcolor="#FFFFFF">
    <td width="25%"> 1</td>

    <td width="25%"> 2</td>

    <td width="25%"> 3</td>

    <td width="25%"> 4</td>
        </tr>
<tr bgcolor="#FFFFFF">
    <td width="25%"> 1</td>

    <td width="25%"> 2</td>

    <td width="25%"> 3</td>

    <td width="25%"> 4</td>
        </tr>
<tr bgcolor="#FFFFFF">
    <td width="25%"> 1</td>

    <td width="25%"> 2</td>

    <td width="25%"> 3</td>

    <td width="25%"> 4</td>
        </tr>
<tr bgcolor="#FFFFFF">
    <td width="25%"> 1</td>

    <td width="25%"> 2</td>

    <td width="25%"> 3</td>