表头固定,表体内容过多出现滚动

table表格表头固定,内容滚动的实现方式

	直接上代码

想要的效果
在这里插入图片描述表头表头固定,表体内容滚动

结构部分
 <table>
        <thead>
            <th>序号</th>
            <th>项目名称</th>
            <th>项目编号</th>
            <th>项目类型</th>
            <th>项目经理</th>
            <th>联系电话</th>
            <th>启动时间</th>
            <th>验收时间</th>
            <th>投资金额</th>
            <th>执行金额</th>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>项目名称1</td>
                <td>项目编号1</td>
                <td>项目类型1</td>
                <td>项目经理1</td>
                <td>联系电话1</td>
                <td>启动时间1</td>
                <td>验收时间1</td>
                <td>投资金额1</td>
                <td>执行金额1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>项目名称2</td>
                <td>项目编号2</td>
                <td>项目类型2</td>
                <td>项目经理2</td>
                <td>联系电话2</td>
                <td>启动时间2</td>
                <td>验收时间2</td>
                <td>投资金额2</td>
                <td>执行金额2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>项目名称3</td>
                <td>项目编号3</td>
                <td>项目类型3</td>
                <td>项目经理3</td>
                <td>联系电话3</td>
                <td>启动时间3</td>
                <td>验收时间3</td>
                <td>投资金额3</td>
                <td>执行金额3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>项目名称4</td>
                <td>项目编号4</td>
                <td>项目类型4</td>
                <td>项目经理4</td>
                <td>联系电话4</td>
                <td>启动时间4</td>
                <td>验收时间4</td>
                <td>投资金额4</td>
                <td>执行金额4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>项目名称5</td>
                <td>项目编号5</td>
                <td>项目类型5</td>
                <td>项目经理5</td>
                <td>联系电话5</td>
                <td>启动时间5</td>
                <td>验收时间5</td>
                <td>投资金额5</td>
                <td>执行金额5</td>
            </tr>
            <tr>
                <td>6</td>
                <td>项目名称6td>
                <td>项目编号6</td>
                <td>项目类型6</td>
                <td>项目经理6</td>
                <td>联系电话6</td>
                <td>启动时间6</td>
                <td>验收时间6</td>
                <td>投资金额6</td>
                <td>执行金额6</td>
            </tr>
        </tbody>
    </table>
样式部分
 table {
            margin: 0 auto;
            margin-top: 50px;
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
       table thead{
		    display:block;
		    overflow-y: scroll;
		}
        
        table th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table tbody{
		    display:block;
		    max-height:100px;
		    overflow-y: scroll;
		 }
        table td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
        table th,table td{
            width: 125px;
        }

注意:此方法比较适合表格宽度固定的写法,如果是不固定的,建议使用百分比来写列宽,同时再写一个和表头一样的结构,定位到表格的表头位置,出现滚动条的话处理一下克隆表头的宽,滚动条一般是17像素。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值