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

     
	
      
		
       
                                  //21个td  省略                    
			        
				         
					          
					          
xxxxx
					          
xxxxx
					          
证件号码
					          
姓名
					          
性别
					          
xxxxx
					          
出生日期
					          
xxx
					          
xxx
					          
ssss
					          
xxxx
					          
ccccc手机
					          
家庭住址
					          
xxxxx
					          
xxxxx
					          
xxxxx
					          
修改日期
				         
			        
			        
				         
         
							        
		       
	
      
     

这里是样式

/** 这是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;}