固定ヘッダの方法を作るためにCSSを使用

図1は、使用されてもよい;表：ディスプレイ：幅100％; 表レイアウト：固定します。

 テーブルレイアウト：固定されたテーブルレイアウトアルゴリズムを設定します。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 = "テーブル・ヘッド"> 
		<テーブルID = "contentTable"> 
			<THEAD> 
				<TR> 
					<TH>の<input type = "チェックボックス" /> </番目> 
					<TH> XXXXX </番目> 
					<TH> XXXXX </番目> 
					<TH>证件号码</番目> 
					<TH>姓名</番目> 
					<TH>性别</番目> 
					<TH> XXXXX </番目> 
					<TH>出生日期</番目> 
					<TH> XXX </番目> 
					<TH> XXX </番目> 
					<TH> SSSS </番目> 
					<TH> XXXX </番目> 
					<TH> CCCCC手机</番目> 
					<TH>家庭住址</番目> 
					<目> xxxxxは</>番目
					<TH> XXXXX </番目> 
					<TH> XXXXX </番目> 
					<TH>修改日期</番目> 
				</ TR> 
			</ THEAD> 
			<TBODY> 
				<TR>
                        Tdは// 21省略
                    </ TR>				 
			</ TBODY> 
		</表> 
	</ div> 
</ div>

ここではスタイルがあります

/ ** *これは、CSS /ある
：身体-Y {隠れオーバーフロー} 
#contentTable TBODY {表示：ブロック;高さ：520px;オーバーフローY：スクロール;} 
#contentTable THEAD、
#contentTable TR {TBODY 表示：表;幅： 100％;テーブルレイアウト：固定 、 幅/ **テーブル列がテーブルの幅によって決定され、左=決定* /テキスト整列コンテンツ助ける：センター;} 
 
/ **各目は、同じ幅と対応するTDを持って、そうでない場合セットは、デフォルトの幅が均等に分割、私はコンテンツの一部は、このようななどのIDカード番号、住所、電話* /として、より多くのあるセット
N番目-の-のタイプ（1）、＃contentTable TR TD：#contentTable TRのTH：型の-N番目（1）{幅：1.5％ため;} 
#contentTable TH TR：の型第N-2、TR＃contentTable TD：N次の式（2）{幅：8.5％;} ＃
TH TR contentTable：N次の型、＃contentTable TR TD：N次の式（3）{幅:. 7％;}（3）
#contentTable TH TR：（4）第N-の型、TR＃contentTable TD：n番目の型（ 4）{幅：8.5％;} 
#contentTable TH TR：（8）第N-の型、TR＃contentTable TD：n番目の型（ 8）{幅：5％;} 
#contentTable TH TR：（9）第N-の型、＃1 contentTable TD TR：N次の式{幅:. 5％;}（9）
#contentTable TH TR：N次の式（12）と、contentTable TR＃TD：N次の式（12）で{幅：8.5％ ;} 
#contentTable TH TR：の型第N-（13）と、contentTable TR＃TD：N次の式（13）で{幅:. 6％;} 
#contentTable TH TR：N次の式（14）、 TR TD #contentTable：N次の式（14）{幅：15％;} 
#contentTable TH TR：-の型のN番目（16）、contentTable TR＃TD：N次の式（16）{幅： ％5;} 
#contentTable TH TR：-の型のN番目（18）と、contentTable TR＃TD：-の型のN番目の（18である）が、{幅:. 5％;} 
 
/ **これは重要である：終了上記参照効果は、ヘッダと欠落の含有量であるべきです。私たちが必要なのではレギュレーション0.4 0.4emで、小さなに変更しようとの違いを見ることができます、私はちょうど0.4にジャンプし、すべての列は、* /垂直方向に整列させることができ、それを試してみました
#contentTable thead要素{幅：Calcの（100 ％ - 0.4em）; / *テーブルのヘッダと垂直配向* /}

右側にあるときに、スクロールバー、あなたはここにいない場合は、

#sTable :: - webkitの-スクロールバー{ 
    幅：0PX。
    不透明度：0; 
    -webkit-オーバーフロースクロール：タッチ。
}