table表头固定，内容可滚动问题

偏执的太偏执、 2022-06-02 01:12 333阅读 0赞

1.首先新建html页面body中写入：

<div class="title_div" id="tdiv">
        <table class="title_tb" id="tb1">
            <tr>
                <td width="80">文件类型</td>
                <td width="80">文件名</td>
                <td width="80">大小</td>
                <td width="80">全景</td>
                <td width="80">状态</td>
                <td width="150">操作</td>
            </tr>
        </table>
    </div>
    <div class="data_div" id="ddiv">
        <table class="title_tb" id="tb2">
            <tr>
                <td width="80">0</td>
                <td width="80">gaaaaaaaaadddddsssssssssssssssssssssssssssseeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
                <td width="80">图片亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园</td>
                <td width="80">300kb亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园</td>
                <td width="80">上传成功亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园亲子乐园</td>
                <td class="last_td" width="150">
                    <div class="delate"><a href="">删 除</a></div>
                    <div class="upload"><a href="">重新上传</a></div>
                </td>
    
            </tr>
            <tr>
                <td>1</td>
                <td>图片</td>
                <td>300kb</td>
                <td>是</td>
                <td>上传成功</td>
                <td class="last_td">
                    <div class="delate"><a href="">删 除</a></div>
                    <div class="upload"><a href="">重新上传</a></div>
                </td>
            </tr>
            <tr>
                <td>亲子乐园</td>
                <td>图片</td>
                <td>300kb</td>
                <td>是</td>
                <td>上传成功</td>
                <td class="last_td">
                    <div class="delate"><a href="">删 除</a></div>
                    <div class="upload"><a href="">重新上传</a></div>
                </td>
            </tr>
            <tr>
                <td>亲子乐园</td>
                <td>图片</td>
                <td>300kb</td>
                <td>是</td>
                <td>上传成功</td>
                <td class="last_td">
                    <div class="delate"><a href="">删 除</a></div>
                    <div class="upload"><a href="">重新上传</a></div>
                </td>
            </tr>
            <tr>
                <td>亲子乐园</td>
                <td>图片</td>
                <td>300kb</td>
                <td>是</td>
                <td>上传成功</td>
                <td class="last_td">
                    <div class="delate"><a href="">删 除</a></div>
                    <div class="upload"><a href="">重新上传</a></div>
                </td>
            </tr>
            <tr>
                <td>亲子乐园</td>
                <td>图片</td>
                <td>300kb</td>
                <td>是</td>
                <td>上传成功</td>
                <td class="last_td">
                    <div class="delate"><a href="">删 除</a></div>
                    <div class="upload"><a href="">重新上传</a></div>
                </td>
            </tr>
        </table>
    </div>

2.对表格进行样式编写：

html, body {
                margin: 0;
                padding: 0;
            }
    
            .title_tb, .data_div {
                overflow: auto;
                border-collapse: collapse;
                cellspacing: 0;
                cellpadding: 0;
                text-align: center;
                table-layout: fixed;
                width: 904px;
            }
    
            #tb1 td {
                /*width: 80px;*/
                border-bottom: 1px solid #c2d4f2;
                border-right: 1px solid #c2d4f2;
                font-size: 14px;
                text-align: center;
                height: 38px;
                color: #fff;
                background: #4166a2;
            }
    
            #tb2 td {
                text-indent: 8px;
                border-bottom: 1px solid #c2d4f2;
                border-right: 1px solid #c2d4f2;
                font-size: 14px;
                text-align: center;
                height: 38px;
                color: #626262;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
    
            }
    
            .title_div, .data_div {
                overflow-x: hidden;
                overflow-y: scroll;
                background: white;
            }
    
            .data_div {
                height: 100px;
            }
    
            .last_td {
                position: relative;
            }
    
            .delate {
                position: absolute;
                right: 115px;
                top: 6.5px;
                width: 70px;
                line-height: 25px;
                background: #ccc;
                border-radius: 5px;
            }
    
            .delate a {
                display: block;
                color: #666;
            }
    
            .upload {
                position: absolute;
                right: 15px;
                top: 6.5px;
                width: 90px;
                line-height: 25px;
                background: #009688;
                border-radius: 5px;
            }
    
            .upload a {
                display: block;
                color: #fff;
            }

3.最重要的一步，js进行操作表头和滚动条：