テーブルの列数や列幅を自由に設定する基本的パターン
要約:テーブルタグに共通CSSと追加CSSの2つのクラスを設定し、追加CSSで作成したい列数や列幅を決めます。筆者は、表を使う場合、自作の汎用リスト表(ul li)を使用していますが、列結合に対応出来ないので、代替の為のテーブルタグで作成したものです。
共通CSS
1 2 3 4 5 6 |
.table_list { border-collapse: collapse; /* 隣接するセルの罫線を重ねる */ table-layout:fixed; /* 列幅を固定レイアウト */ width:100%;} /* 全体の幅:100% */ .table_list th{ /* 列見出し */ border:1px solid #000;} /* 罫線付き */ |
行番 | このページでは、以下の条件で作成されています。 |
---|---|
2 | 罫線は1本とし、単純なリスト形式と同じ表示です。 |
3 | 列の幅を固定化。tableタグの特性を生かした列の内容の長さで幅を自動調整する場合は、このCSSを削除。 |
4 | tableの表示領域が100%です。デザインに合わせ、固定幅(例:max-width:500px;など)に変更下さい。 |
5-6 | 列見出しも他の列と同等の罫線をつけています。 |
事例-A 列の幅均等 列見出し付き
一番シンプルな罫線だけの基本の表
ひらがな | カタカナ | 英大文字 | 英小文字 |
---|---|---|---|
あいうえお | アイウエオ | AIUEO | aiueo |
かきくけこ | カキクケコ | KAKIKUKEKO | kakikukeko |
事例-A HTML
tableに任意のclass名を追加(仮:ptn_a)
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<table class="table_list ptn_a"> <!-- classを追加 --> <tbody> <tr> <th>ひらがな</th><th>カタカナ</th><th>英大文字</th><th>英小文字</th> </tr> <tr> <td>あいうえお</td><td>アイウエオ</td><td>AIUEO</td><td>aiueo</td> </tr> <tr> <td>かきくけこ</td><td>カキクケコ</td><td>KAKIKUKEKO</td><td>kakikukeko</td> </tr> </tbody> </table> |
事例-A 追加したclassのCSS
1 2 3 4 |
/* ================== 事例-A 追加 class =================== */ .ptn_a td:nth-child(n+1){ /* =====データ域1列目から最終列まで ===== */ text-indent:0.5em; /* 先頭スペース */ } |
行番 | 概略説明 |
---|---|
2-4 | td(データ域)1列目から最後まで、先頭にスペース |
事例-B 左端の列に連番 2列目以降の列幅均等 列見出し付き
No | ひらがな | カタカナ | 英大文字 | 英小文字 |
---|---|---|---|---|
1 | あいうえお | アイウエオ | AIUEO | aiueo |
2 | かきくけこ | カキクケコ | KAKIKUKEKO | kakikukeko |
事例-B HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<table class="table_list ptn_b"> <tbody> <tr> <th>No</th><th>ひらがな</th><th>カタカナ</th><th>英大文字</th><th>英小文字</th> </tr> <tr> <td>1</td><td>あいうえお</td><td>アイウエオ</td><td>AIUEO</td><td>aiueo</td> </tr> <tr> <td>2</td><td>かきくけこ</td><td>カキクケコ</td><td>KAKIKUKEKO</td><td>kakikukeko</td> </tr> </tbody> </table> |
事例-B CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* ================== 事例-B 追加 class =================== */ .ptn_b th:first-child, /* ===== 列の見出しの1列目 ===== */ .ptn_b td:first-child /* ===== データ域の1列目 ===== */ width:8%; /* 幅の%指定 */ } .ptn_b td:first-child{ /* ===== データ域の1列目 ===== */ text-align:center; /* テキストの中央寄せ */ } .ptn_b th:nth-child(n+2), /* =====列見出し2列目から最終列まで ===== */ .ptn_b td:nth-child(n+2){ /* =====データ域2列目から最終列まで ===== */ width:23%; /* 各列の幅を%指定 */ } .ptn_b td:nth-child(n+2){ /* ===== データ域の2列目から最終列まで ===== */ text-indent:0.5em; /* 先頭スペース */ } |
行番 | 概略説明 |
---|---|
2-5 | 1列目の見出しとデータ域の幅を%指定。<th>又は<td>タグだけでも出来るブラウザがありますが、他のCSS(th td)が干渉してうまくいかない場合があるので、入れた方が良いようです。 |
9-12 | (100-1列目の幅8%)/列数。ブラウザによっては、この指定が無くても1列目の幅の残りを均等幅に表示しますが、このCSSを入れた方が良いようです。 |
事例-C 各列を個別の幅 列見出し背景色付き
No | ひらがな | カタカナ | 英大文字 | 英小文字 |
---|---|---|---|---|
1 | あいうえお | アイウエオ | AIUEO | aiueo |
2 | かきくけこ | カキクケコ | KAKIKUKEKO | kakikukeko |
事例-C HTML
tableに任意のclass名を追加(仮:ptn_c)
1 2 |
<table class="table_list ptn_c"> <!-- classを追加 --> <!-- 2行目以降は、前記の事例-Bと同じなので省略 --> |
事例-C CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* ================== 事例-C 追加 class =================== */ .ptn_c th{ /* ===== 列の見出し ===== */ background-color:#cfc; /* 背景色 */ } .ptn_c td:first-child{ /* ===== データ域の1列目 ===== */ text-align:center; /* テキストの中央寄せ */ } .ptn_c td:nth-child(n+2){ /* ===== データ域の2列目以降から最終列まで ===== */ text-indent:0.5em; /* 列のテキストの先頭スペース */ } /* ======== 各列の幅指定 % ========== */ .ptn_c th:first-child, td:first-child{ width:5%;} .ptn_c th:nth-child(2), td:nth-child(2){ width:15%;} .ptn_c th:nth-child(3), td:nth-child(3){ width:20%;} .ptn_c th:nth-child(4), td:nth-child(4){ width:25%;} .ptn_c th:nth-child(5), td:nth-child(5){ width:35%;} |
行番 | 概略説明 |
---|---|
13-22 | 列の数だけ、幅を個別に指定。(width%値の合計)<=100 |