使用css讓表頭固定的方法

一、能夠使用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 */
body{overflow-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;
}