純粋なCSSを達成するために、ヘッダテーブルの先端を固定する方法

これは、インターネット上で見つかった方法であり、独自のHTMLオープンをコピーすることの効果を見ることができます：
<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <META NAME = "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <タイトル>纯CSSテーブル表格THEAD固定のtbody滚动</ TITLE> 
    <スタイル> .table-ボックス{ 
        マージン：100pxに自動; 
        幅：1024px; 
    } 

    / *滚动条宽度* / 
    :: - WebKitの、スクロールバー{ 
        幅：8px。
        背景色：透明; 
    } 

    / *滚动条颜色* / 
    :: - WebKitの、スクロールバーのサム{ 
        背景色：＃27314d。

        ボーダー間隔：0PX。
        -webkit-オーバーフロースクロール：タッチ。
        国境崩壊：崩壊。
    } 

    テーブルキャプション{ 
        フォント重量：太字。
        フォントサイズ：は24px; 
        行の高さ：は50px; 
    } 

    テーブル番目、テーブルTD { 
        高さ：は50px。
        テキスト整列：センター; 
        国境：1pxの灰色の固体。
    } 

    テーブルTHEAD { 
        色：白。
        背景色：＃38F; 
    } 

    テーブルTBODY { 
        表示：ブロック; 
        幅：計算値（100％+ 8px）。/ *这里的8px是滚动条的宽度* / 
        高さ：300ピクセル; 
        オーバーフロー-Y：オート。
    } 

    テーブルTFOOT { 
        背景色：＃71ea71。
    } 

    テーブルTHEAD TR、テーブルTBODY TRを、テーブルTFOOTのTR { 
        ボックスサイズ：境界ボックス。
        テーブルレイアウト：固定されました 
        ディスプレイ：テーブル。
        幅：100％; 
    } 

    テーブルのTBODY TR：n番目の型（奇数）{ 
        背景：#EEE。
    } 

    テーブルのTBODY TR：n番目の型（偶数）{ 
        背景：#FFF。
    } 

    テーブルのTBODY TRのTD { 
        ボーダー底：なし。
    } </スタイル> 
</ HEAD> 
<BODY> 
<部クラス= "テーブルボックス"> 
    <テーブルCELLPADDING = "0" CELLSPACING = "0">
        <キャプション>纯CSSテーブル表格THEAD固定TBODY滚动</キャプション> 
        <THEAD> 
            <TD>モバイル</ TD> 
        </ TR> 
        <TR> 
        <TR> 
            <TH>
            <TH>姓名</番目> 
            <TH>年龄</番目> 
            <TH>性别</番目> 
            <TH>手机</番目> 
        </ TR> 
        </ THEAD> 
        <TBODY> 
        <TR> 
            <TD> 001 </ TD> 
            <TD>名</ TD> 
            <TD> 28 </ TD> 
            <TD>女</ TD> 
            <TD>モバイル</ TD> 
        </ TR> 
        <TR> 
            <TD> 002 </ TD> 
            <TD>名</ TD> 
            <TD> 28 </ TD> 
            <TD>男</ TD> 
            <TD> 003 </ TD> 
            <TD>名</ TD> 
            <TD> 28 </ TD> 
            <TD>女</ TD> 
            <TD>モバイル</ TD>
        </ TR> 
        <TR> 
            <TD> 004 </ TD> 
            <TD>名</ TD> 
            <TD> 28 </ TD> 
            <TD>男</ TD> 
            <TD>モバイル</ TD> 
        </ TR > 
        <TR> 
            <TD> 005 </ TD> 
            <TD>名</ TD> 
            <TD> 28 </ TD> 
            <TD>女</ TD> 
            <TD>モバイル</ TD> 
        </ TR> 
        <TR > 
            <TD> 006 </ TD> 
            <TD>名前</ TD> 
            <TD> 28 </ TD> 
            <TD>男< 
            <TD>名</ TD> 
            <TD> 28 </ TD> 
            <TD>モバイル</ TD>
        </ TR> 
        <TR> 
            <TD> 007 </ TD> 
            <TD>女</ TD> 
            <TD>モバイル</ TD> 
        </ TR> 
        <TR> 
            <TD> 008 </ TD> 
            <TD>名前</ TD> 
            <TD> 28 </ TD> 
            <TD>男</ TD> 
            <TD>モバイル</ TD> 
        </ TR> 
        </ TBODY> 
        <TFOOT> 
        <TR> 
            <TD COLSPAN = "5"> 【テーブル、THEAD、TBODY、TFOOT】COLSPAN：合并行、ROWSPAN：合并列</ TD> 
        </ TR> 
        </ TFOOT> 
    </ TABLE>
</ section>の
</ BODY> 
</ HTML>
純粋なCSSを達成するために、ヘッダテーブルの先端を固定する方法

おすすめ
