table要素の境界線（ボーダー）の太さや色を一部だけ変えたり消すCSS

table 要素の境界線（ボーダー）の太さや色を一部だけ変えたり消す方法。

テーブルの一部の境界線の太さや色を変える

普段 table の境界線は border でまとめて定義するので忘れていたが、border-top、border-right、border-bottom、border-left を td 要素に使えば、テーブル（セル）の枠線を部分的に変更できる。

<style>
table.ex_table {
  border-collapse: collapse;
  border: 0;
}

table.ex_table td {
  border: 1px solid #222;
  padding: 3px;
}

table.ex_table td.ex_border_a {
  border-bottom: 3px solid red;
}
</style>

<table class="ex_table">
<tr>
<td>あああ</td>
<td class="ex_border_a">あああ</td>
</tr>
<tr>
<td>あああ</td>
<td>あああ</td>
</tr>
</table>

表示例

あああ	あああ
あああ	あああ

線の太さ、スタイル、色は border-bottom-width、border-bottom-style、border-bottom-color のように個別に指定しても良い。 bottom の部分は必要に応じてそれぞれ top、right、left に変える。 または、border-width、border-style、border-color でそれぞれ上右下左指定しても良い。

<style>
table.ex_table {
  border-collapse: collapse;
  border: 0;
}

table.ex_table td {
  border: 1px solid #222;
  padding: 3px;
}

table.ex_table td.ex_border_b {
  border-bottom-width: 3px;
  border-bottom-style: dotted;
  border-bottom-color: blue;
}
</style>

<table class="ex_table">
<tr>
<td class="ex_border_b">あああ</td>
<td>あああ</td>
</tr>
<tr>
<td>あああ</td>
<td>あああ</td>
</tr>
</table>

表示例

あああ	あああ
あああ	あああ

この際、線の width が 1px だと線のスタイルが変わらないので 2px 以上にする。 以上を踏まえ、私がこのCSSを利用してやりたかったのが、表が2つ横に並んでいるように見せることで、以下に記す。

表が横に並んでいるように見せる

1つのテーブルに間に境目を作るための空のセルを設け、そのセルに border:0 を指定して枠線を消せば、表が2つ並んでいるように見える。 要するにエクセルの枠線と同じである。 私は昔なんとなく枠線と同じ色でセルを塗りつぶしていたが、透明の方が表が見やすい。

<style>
table.ex_table {
  border-collapse: collapse;
  border: 0;
}

table.ex_table td {
  border: 1px solid #222;
  padding: 3px;
}

table.ex_table td.ex_border_e {
 border: 0;
 width: 20px;
}
</style>

<table class="ex_table">
<tr>
<td>男性</td>
<td>点数</td>
<td class="ex_border_e"></td>
<td>女性</td>
<td>点数</td>
</tr>
<tr>
<td>鈴木</td>
<td>98点</td>
<td class="ex_border_e"></td>
<td>阿部</td>
<td>100点</td>
</tr>
<tr>
<td>佐藤</td>
<td>95点</td>
<td class="ex_border_e"></td>
<td>木下</td>
<td>96点</td>
</tr>
<tr>
<td>山田</td>
<td>94点</td>
<td class="ex_border_e"></td>
<td>伊藤</td>
<td>94点</td>
</tr>
</table>

表示例

男性	点数		女性	点数
鈴木	98点		阿部	100点
佐藤	95点		木下	96点
山田	94点		伊藤	94点

サイトを作っていると、こういう風に表に隙間を設けたいときがある。 テーブルを2つ作って並べても良いが、私は1つのテーブルで済ませたいので、この方法を使っている。

境界線を太くして表を別ける

表の間の境界線を太くして、表が別れているように見せることもできるが、見た目はあまり良くない。

<style>
table.ex_table {
  border-collapse: collapse;
  border: 0;
}

table.ex_table td {
  border: 1px solid #222;
  padding: 3px;
}

table.ex_table td.ex_border_f {
  border-right: 15px solid #222;
}
</style>

<table class="ex_table">
<tr>
<td>男性</td>
<td class="ex_border_f">点数</td>
<td>女性</td>
<td>点数</td>
</tr>
<tr>
<td>鈴木</td>
<td class="ex_border_f">98点</td>
<td>阿部</td>
<td>100点</td>
</tr>
<tr>
<td>佐藤</td>
<td class="ex_border_f">95点</td>
<td>木下</td>
<td>96点</td>
</tr>
<tr>
<td>山田</td>
<td class="ex_border_f">94点</td>
<td>伊藤</td>
<td>94点</td>
</tr>
</table>

表示例

男性	点数	女性	点数
鈴木	98点	阿部	100点
佐藤	95点	木下	96点
山田	94点	伊藤	94点

見た目は、空のセルを設け、それを枠線と同じ色で塗りつぶす方法と同じ。 ただ、この方法は空のセルを用意する必要がない。