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

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

以下HTML。

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

以下CSS。

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;
}

表示例。

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

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

以下HTML。

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

以下CSS。

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;
}

表示例。

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

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

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

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

以下HTML。

<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>

以下CSS。

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;
}

表示例。

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

サイトを作っていると、こういう風に表に隙間を設けたいときがある。 表を2つ作って並べても良いが、1つの表で済ませたい場合は、こういう書き方もできる。

ただ複数の表を並べたい場合は、display:flex を使った方が良いかもしれない。

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

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

以下HTML。

<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>

以下CSS。

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;
}

表示例。

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

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

display:flex で表を並べる

複数の表をCSSのdisplay:flexを使って並べる。

以下HTML。

<div class="ex_flex">

<table>
<tr>
<td>東京</td>
<td>神奈川</td>
<td>千葉</td>
<td>埼玉</td>
</tr>
</table>

<table>
<tr>
<td>大阪</td>
<td>京都</td>
<td>兵庫</td>
<td>奈良</td>
</tr>
</table>

</div>

以下CSS。

.ex_flex {display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;}

gapで上下左右のスペース（間隔）を調整できる。