自定表，设置固定表头

已于 2022-03-26 11:58:51 修改
阅读量195 收藏
点赞数
文章标签： html
于 2021-02-01 17:05:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011220266/article/details/113524516
版权
自定义表，设置固定表头

参考：https://blog.csdn.net/qq_33583322/article/details/85163101

  1. css设置

  2.      #mytable tbody {
         display:block;
         height:100px;
         overflow-y:scroll;
     }

     #mytable thead {
         display:table;
         width:100%;
         table-layout:fixed;
     }
 	
 	#mytable  tbody tr {
         display:table;
         width:100%;
         table-layout:fixed;
     }
 	
 	#mytable  td {
         text-align:center  ;
     }

     #mytable thead {
         width: calc( 100% - 1.2em )
     }

  3. 表头设置

    <div>
                            <table id="mytable"  class="table table-bordered">
                                <thead  >
                                    <th style="width:5%;text-align: center;"><b>序号</b></th>
                                    <th style="width:15%;text-align: center;"><b>考核目标</b></th>
                                    <th style="width:53%;text-align: center;"><b>细则</b></th>
                                    <th style="width:10%;text-align: center;"><b>项目分数</b></th>
                                    <th style="width:7%;text-align: center;"><b>目标值</b></th>
                                    <th style="width:10%;text-align: center;"><b>考核归口部门</b></th>
                                </thead>
                                <tbody id="marketBody"   >
                                </tbody>
                            </table>
                        </div>
测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script src="js/css.js" type="text/javascript"></script>
    <script src="assets/js/less.min.js" type="text/javascript"></script>
    <style>

        #mytable tbody {
            display:block;
            height:100px;
            overflow-y:scroll;
        }

        #mytable thead {
            display:table;
            width:100%;
            table-layout:fixed;
        }
		
		#mytable  tbody tr {
            display:table;
            width:100%;
            table-layout:fixed;
        }
		
		#mytable  td {
            text-align:center  ;
        }

        #mytable thead {
            width: calc( 100% - 1.2em )
        }
    </style>
</head>
<body style="padding: 0px; margin: 0px; overflow-x: hidden; overflow-y: auto">

                   
	<div>
		<table id="mytable"  border="1">
			<thead  >
				<th style="width:5%;text-align: center;"><b>序号</b></th>
				<th style="width:15%;text-align: center;"><b>考核目标</b></th>
				<th style="width:53%;text-align: center;"><b>细则</b></th>
				<th style="width:10%;text-align: center;"><b>项目分数</b></th>
				<th style="width:7%;text-align: center;"><b>目标值</b></th>
				<th style="width:10%;text-align: center;"><b>考核部门</b></th>
			</thead>
			<!-- 常规情况下，tbody中的td无需设置宽度width， -->
			<tbody >
			<tr style="background-color: #87CEFA"><td style="width:5%;">一、</td><td style="width:95%;" colspan="5">指标</td></tr>

<tr style="background-color: #B0E2FF"><td style="width:5%;">1</td><td style="width:95%;" colspan="5">品牌</td></tr>

<tr><td style="width:5%;">1.1</td><td style="width:15%;"> 品牌总量</td><td style="width:53%;">规则xxx</td><td style="width:10%;">2</td><td style="width:7%;"> </td><td style="width:10%;">业务部</td></tr>

<tr><td style="width:5%;">1.2</td><td style="width:15%;">品牌规格数</td><td style="width:53%;">规则xxx</td><td style="width:10%;">2</td><td style="width:7%;">10</td><td style="width:10%;">业务部</td></tr>

<tr style="background-color: #B0E2FF"><td>2</td><td style="width:95%;" colspan="5">品牌</td></tr>

<tr><td style="width:5%;">2.1</td><td style="width:15%;">品牌总销量</td><td style="width:53%;">规则xxx</td><td style="width:10%;">2</td><td style="width:7%;">10 </td><td style="width:10%;">业务部</td>
</tr>

<tr><td style="width:5%;">2.1</td><td style="width:15%;">品牌总销量</td><td style="width:53%;">规则xxx</td><td style="width:10%;">2</td><td style="width:7%;"> 10</td><td style="width:10%;">业务部</td>

<tr style="background-color: #B0E2FF"><td>2</td><td style="width:95%;" colspan="5">品牌</td></tr>

<tr><td style="width:5%;">2.1</td><td style="width:15%;">品牌总销量</td><td style="width:53%;">规则xxx</td><td style="width:10%;">2</td><td style="width:7%;"> 10</td><td style="width:10%;">业务部</td>
</tr>
			</tbody>
		</table>
	</div>


</script>
</body>
</html>
踢皮球
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值