デザインサンプルで学ぶCSSによるスタイリング～「テーブル（セルのボーダーの表示形式によるスタイリング）」編

CSSで作るWeb用パーツ（3）

「border-collapse:collapse;」

　「collapse」のときは、テーブル全体のボーダーや各セルのボーダーを重ねて表示します。しかし、ボーダーが重なった場合に表示される優先順位は、border-styleプロパティの値がhiddenに設定されているボーダーがあればそれが最優先となり、次に、ボーダー幅が太い順に優先されます。

　次の例では、テーブル全体のボーダー幅を10px、各セルのボーダー幅を5pxで指定し、最後のセルに「border-style:hidden;」を指定しました。重なっている部分に注目すると、まず、hiddenが指定された最後のセルのスタイルが優先され、次に幅10pxのテーブルのボーダー、最後にボーダー幅5pxの各セルの順に表示されていることが分かります。

［リスト03］ボーダー表示の優先順位/CSS（collapse01.html）

table{
  border-collapse: collapse;
  border: 10px solid red; /* ボーダー幅10px */
} 
td {
  border: 5px solid blue; /* ボーダー幅5px */
}
#hidden {
  border-style: hidden; /* ボーダーを表示しない */
}

図03：ボーダー表示の優先順位（hidden／ボーダー幅）（collapse01.html）

　ボーダーの幅が同じ場合には、種類が「double、solid、dashed、dotted、ridge、outset、groove、inset」の順に優先されます。次の例では、上のセルから優先順にborder-styleプロパティの値を設定しました。セルの下ボーダーと、その下のセルの上ボーダーが重なっていますが、上のセルのボーダースタイルが優先されていることが分かります（分かりやすいように、隣にseparateのテーブルを配置しています）。

図04：ボーダー表示の優先順位（border-styleの種類順。collapse02.html）

　色だけが異なっている場合には、「セル（td/th）、横列（tr）、横列グループ（thead/tbody/tfoot）、縦列（col）、縦列グループ（colgroup）、テーブル（table）」の順に優先されて表示されます。

　次の例では、セル（td）にblue、横列（tr）にyellow、横列グループ（tbody）にred、縦列（col）にorange、縦列グループ（colgroup）にgreen、テーブル(table）にblackのボーダーを指定しました。縦列グループや縦列のcolgroupやcol要素については次回、詳しく説明しますが、ここでは、1列、1列、2列、1列のグループに分けていて、2列目に縦列、3列目と4列目に縦列グループのスタイルを適用しています。

［リスト04］ボーダー表示の優先順位/HTML（collapse03.html）

<table>
  <caption>ボーダー表示の優先順位その3</caption>
  <colgroup span="1"></colgroup>
  <colgroup>
    <col class="col" />
  </colgroup>
  <colgroup span="2" class="colgroup">
  </colgroup>
  <colgroup span="1"></colgroup>
<tbody>
  <tr>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr class="tr">
    <td>データ</td>
    <td>データ</td>
    <td class="td">データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
</tbody>
</table>

［リスト05］ボーダー表示の優先順位/CSS（collapse03.html）

table {
  border-collapse: collapse; 
  border: 10px solid black;
}
td.td {  /* セル */
  border: 10px solid blue;
  background: rgba(0,0,255,0.5);
}
tr.tr {  /* 横列 */
  border: 10px solid yellow;
  background: rgba(255,255,0,0.5);
}
tbody {  /* 横列グループ */
  border: 10px solid red; 
}
col.col {  /* 縦列 */ 
  border: 10px solid orange;
  background: rgba(255,165,0,0.5);
}
colgroup.colgroup {  /* 縦列グループ */
  border: 10px solid green;
  background: rgba(0,128,0,0.5);
}

図05：ボーダー表示の優先順位