テーブル ヘッダー固定

テーブルのヘッダー固定についてご紹介いたします。

テーブルのヘッダー固定にはテーブルのtbodyを使用したものや、 javascriptを使用したものなどいくつかありますがここではテーブルを二つに分けてヘッダーを固定する方法を記載します。

下記のよ うにXHTMLを記述します。

下記のソースでは「table.header」を固定するヘッダー部分、「.data_box」をスクロール するデータ部分としています。

<div class="data_area">
    <table width="0" border="0" cellspacing="0" cellpadding="0" 
class="header" summary="テーブルヘッダー">
        <col width="25%" />
        <col width="25%" />
        <col width="25%" />
        <col width="25%" />
        <tr>
            <th abbr="ヘッダータイトル1">
                タイトル1
            </th>
            <th abbr="ヘッダータイトル2">
                タイトル2
            </th>
            <th abbr="ヘッダータイトル3">
                タイトル3
            </th>
            <th abbr="ヘッダータイトル4" class="r_none">
                タイトル4
            </th>
        </tr>
    </table>
    <div class="data_box">
        <div class="data_space">
            <table width="0" border="0" cellspacing="0" cellpadding="0" 
class="data" summary="テーブルデータ">
                <col width="25%" />
                <col width="25%" />
                <col width="25%" />
                <col width="25%" />
                <tr>
                    <td>
                        データ1
                    </td>
                    <td>
                        データ2
                    </td>
                    <td>
                        データ3
                    </td>
                    <td>
                        データ4
                    </td>
                </tr>
                <tr>
                    <td>
                        データ6
                    </td>
                    <td>
                        データ7
                    </td>
                    <td>
                        データ8
                    </td>
                    <td>
                        データ9
                    </td>
                </tr>
                <tr>
                    <td>
                        データ10
                    </td>
                    <td>
                        データ11
                    </td>
                    <td>
                        データ12
                    </td>
                    <td>
                        データ13
                    </td>
                </tr>
                <tr>
                    <td>
                        データ14
                    </td>
                    <td>
                        データ15
                    </td>
                    <td>
                        データ16
                    </td>
                    <td>
                        データ17
                    </td>
                </tr>
                <tr>
                    <td>
                        データ18
                    </td>
                    <td>
                        データ19
                    </td>
                    <td>
                        データ20
                    </td>
                    <td>
                        データ21
                    </td>
                </tr>
                <tr>
                    <td>
                        データ22
                    </td>
                    <td>
                        データ23
                    </td>
                    <td>
                        データ24
                    </td>
                    <td>
                        データ25
                    </td>
                </tr>
                <tr>
                    <td>
                        データ26
                    </td>
                    <td>
                        データ27
                    </td>
                    <td>
                        データ28
                    </td>
                    <td>
                        データ29
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

cssは以下のようになります。

.data_area {
  width: 400px;
  border-top: 1px solid #CCC;
  border-right: 1px solid #CCC;
  border-left: 1px solid #CCC;
}

table.header {
  width: 400px;
}

table.header th {
  padding: 5px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  background: #E6E6E6;
}

table.header th.r_none {
  border-right: none;
}

.data_box {
  width: 400px;
  height: 200px;
  overflow: hidden;
  border-bottom: 1px solid #CCC;
  overflow-y: scroll;
}

.data_space {
  padding: 0 0 10px 0;
}

table.data {
  width: 400px;
}

table.data td {
  padding: 5px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}

「.data_area」で全体の幅とボーダー線を記述します。

「table.header」ではテーブルの幅を明確にし、 「table.header th」では、パディング、ボーダー線、そして背景色を指定しています。「table.header th.r_none」は最も右横のthの右横の線を消去しています。これを指定しない場合、「.data_area」の「border-right: 1px solid #CCC;」とプロパティが被り、最も右横のthの線だけが二重になったように見えます。

「.data_box」では 幅、高さを指定し、「overflow: hidden;」と「overflow-y: scroll;」で「height: 200px;」を越える内要素が「.data_box」内に存在した場合、スクロールバーが出現します。

「.data_space」の「 padding: 0 0 10px 0;」は「table.data」の最後のtd要素の「border-bottom: 1px solid #CCC;」と「.data_box」の「border-bottom: 1px solid #CCC;」との線の重なりを回避するために指定しています。

「table.data」はデータ部分のパディングや、ボーダー線などの装飾 をしています。

「table.header」と、「table.data」の各セルの幅は表の縦列の属性をまとめて指定する 「<col>」で決定しています。

テーブル ヘッダー固定