使用css让表头固定的方法

Posted 2022-06-05 shj-com

1、可以使用display: table; width: 100%; table-layout: fixed;

 table-layout: fixed;设置表格布局算法。tableLayout 属性用来显示表格单元格、行、列的算法规则。

详细可见：https://www.w3school.com.cn/cssref/pr_tab_table-layout.asp

https://www.w3school.com.cn/tiy/t.asp?f=csse_table_table-layout

<div>
	<div class="table-head">
		<table id="contentTable">
			<thead>
				<tr>
					<th><input type="checkbox"/></th>
					<th>xxxxx</th>
					<th>xxxxx</th>
					<th>证件号码</th>
					<th>姓名</th>
					<th>性别</th>
					<th>xxxxx</th>
					<th>出生日期</th>
					<th>xxx</th>
					<th>xxx</th>
					<th>ssss</th>
					<th>xxxx</th>
					<th>ccccc手机</th>
					<th>家庭住址</th>
					<th>xxxxx</th>
					<th>xxxxx</th>
					<th>xxxxx</th>
					<th>修改日期</th>
				</tr>
			</thead>
			<tbody>
				<tr>
                        //21个td  省略
                    </tr>				
			</tbody>
		</table>
	</div>
</div>

这里是样式

/** 这是css */
bodyoverflow-y: hidden
#contentTable tbody  display: block; height: 520px; overflow-y: scroll; 
#contentTable thead,
#contentTable tbody tr  display: table; width: 100%; table-layout: fixed; /**表格列的宽度由表格宽度决定，不由内容决定*/ text-align: center; 
 
/**每一个th都要和对应的td宽度相同，如果不设置，则默认均分宽度，我设置的都是一些内容较多的，比如说身份证号码，电话，住址等*/
#contentTable tr th:nth-of-type(1),#contentTable tr td:nth-of-type(1)width: 1.5%;
#contentTable tr th:nth-of-type(2),#contentTable tr td:nth-of-type(2)width: 8.5%;
#contentTable tr th:nth-of-type(3),#contentTable tr td:nth-of-type(3)width: 7%;
#contentTable tr th:nth-of-type(4),#contentTable tr td:nth-of-type(4)width: 8.5%;
#contentTable tr th:nth-of-type(8),#contentTable tr td:nth-of-type(8)width: 5%;
#contentTable tr th:nth-of-type(9),#contentTable tr td:nth-of-type(9)width: 5%;
#contentTable tr th:nth-of-type(12),#contentTable tr td:nth-of-type(12)width: 8.5%;
#contentTable tr th:nth-of-type(13),#contentTable tr td:nth-of-type(13)width: 6%;
#contentTable tr th:nth-of-type(14),#contentTable tr td:nth-of-type(14)width: 15%;
#contentTable tr th:nth-of-type(16),#contentTable tr td:nth-of-type(16)width: 5%;
#contentTable tr th:nth-of-type(18),#contentTable tr td:nth-of-type(18)width: 5%;
 
/**这一个重要：写完上面的看效果应该是表头和内容对不齐。我们需要的是调节0.4em中的0.4，试着变大变小就能看到区别，我试了，刚好跳到0.4，所有的列都能垂直对齐*/
#contentTable thead  width: calc( 100% - 0.4em);/*表头与表格垂直对齐*/ 

这里如果不需要右侧滚动条的时候，

#sTable::-webkit-scrollbar
    width:0px;
    opacity:0;
    -webkit-overflow-scrolling: touch;