【CSS】tableのborderが一部だけ太くなるのを回避する

# はじめに
以下のようなHTML（とCSS）を書いてみます。

```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="Shift_JIS">
  <title></title>
  <style type="text/css">
  <!--
    td {border: 2px solid;}
  //-->
  </style>
</head>

<body>
  <table>
    <tr>
      <td>セル１１</td>
      <td>セル１２</td>
      <td>セル１３</td>
    </tr>
    <tr>
      <td>セル２１</td>
      <td>セル２２</td>
      <td>セル２３</td>
    </tr>
    <tr>
      <td>セル３１</td>
      <td>セル３２</td>
      <td>セル３３</td>
    </tr>
  </table>
</body>
</html>
```
ブラウザで表示するとこんな感じ :arrow_down: 
![table02.png](https://qiita-image-store.s3.amazonaws.com/0/188980/adc7e08b-952a-c0b8-8091-781f58758c88.png)

セルの間に隙間があるので、tableタグにstyleをあてて、隙間を消しましょう。

```HTML
<table style="border-spacing: 0px;">
```
そうすると、こんな感じ :arrow_down: 
![table01.png](https://qiita-image-store.s3.amazonaws.com/0/188980/28e75fb7-29da-1456-ed49-3c102c5ab35b.png)

はい、セル同士がくっついた結果、borderもくっついて、太く見えるようになってしまいました :scream:
これをCSSで解決していきます。

## おことわり
デザイナーさんにとっては朝飯前だと思うのですが、個人的には、初めて知った時にものすごく感動したんです・・・。
あと、普通はreset.css的なものを適用するので、素のHTMLにCSSを当て込むことはほとんどないと思います。

# １．縦のborderを細くする
この状態から:arrow_down:まずは縦のborderを細くしましょう。
![table01.png](https://qiita-image-store.s3.amazonaws.com/0/188980/28e75fb7-29da-1456-ed49-3c102c5ab35b.png)
セルが隣り合っている部分で太く見えてしまっているので、セル１１やセル２１、セル１２の右側のborderを外してみます。
というわけで、以下:arrow_down:のCSSを追記。

```CSS
td {
  border: 2px solid;
  border-right: 0px;  /* 追記箇所 */
}
```
縦のborderがすっきりしましたね:star2:
しかし、一番右側のセル１３やセル２３の右borderまで消えてしまいました・・・（当然ですけどね）。
![table03.png](https://qiita-image-store.s3.amazonaws.com/0/188980/dc5b05ff-27c0-ebcf-412f-09bb23258f21.png)

# ２．横のborderを細くする
消えた右borderのことはいったん置いといて、横borderの対応をします。
横borderもセルの隣接部分が太く見えてしまっているので、セル１１やセル２１の下borderを外すように以下のCSSを追記 :pencil2:

```CSS
td {
  border: 2px solid;
  border-right: 0px;
  border-bottom: 0px;  /* 追記箇所 */
}
```
はい、横borderもすっきりしました:pig:
ただし、縦borderを対応したとき同様、セル３１やセル３２の下borderも消えています（そういうCSSを書いてるので当然）。
![table04.png](https://qiita-image-store.s3.amazonaws.com/0/188980/6fa3d320-b4f1-bc1d-7876-bd9debe0018e.png)

# ３－１．消えたborderを適用しなおす
適用しなおすborderと、対象のセルを整理します。
・右borderをつけたい :arrow_right:セル１３、セル２３、セル３３
・下borderをつけたい :arrow_right:セル３１、セル３２、セル３３
これをもとに、borderを適用していきます。

・・・はい、これできれいになりました:laughing:

```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="Shift_JIS">
  <title></title>
  <style type="text/css">
  <!--
    td {
      border: 2px solid;
      border-right: 0px;
      border-bottom: 0px;
    }
  //-->
  </style>
</head>

<body>

  <table style="border-spacing: 0px;">
    <tr>
      <td>セル１１</td>
      <td>セル１２</td>
      <td style="border-right: 2px solid;">セル１３</td>
    </tr>
    <tr>
      <td>セル２１</td>
      <td>セル２２</td>
      <td style="border-right: 2px solid;">セル２３</td>
    </tr>
    <tr>
      <td style="border-bottom: 2px solid;">セル３１</td>
      <td style="border-bottom: 2px solid;">セル３２</td>
      <td style="border-right: 2px solid; border-bottom: 2px solid;">セル３３</td>
    </tr>
  </table>

</body>
</html>
```
![table05.png](https://qiita-image-store.s3.amazonaws.com/0/188980/481b351b-2209-7393-a882-7563c114e011.png)

・・・きれいになったけどね？
ちょっとこれは、美しくない:droplet:
この方法だと、一番右のtdタグと一番下のtdタグだけに別のCSSを当てないといけないです。
（HTMLの中に直接CSSを書いているのは、一旦置いといて:sweat_smile:）
それに、tdタグの数が縦・横で可変だと、適用させたいtdタグがわからなくなります。

# ３－２．tableタグにborderをつける
では、美しくborderを適用し直すにはどうしたらいいか。
tableタグのborderを使えばいいのです:exclamation:
この状態のtableタグに:arrow_down:
![table04.png](https://qiita-image-store.s3.amazonaws.com/0/188980/6fa3d320-b4f1-bc1d-7876-bd9debe0018e.png)
こうして:arrow_down:borderのスタイルを追加すると・・・:question:

```HTML
<table style="border-spacing: 0px; border: 2px solid #FF6600;">
```
![table06.png](https://qiita-image-store.s3.amazonaws.com/0/188980/2ea8fbb2-472c-0e7e-fe11-11fad677db8b.png)
このように、table全体がborderで囲まれました。
※わかりやすくするために、オレンジ色のスタイルを適用しています。

あとは、２重になってしまった上と左を消します。
やっつけ感ありますが、とりあえず「上と左を消す＝右と下だけ適用する」ようにスタイルを書き換えます:arrow_down:
※オレンジの色指定も外しました。

```HTML
<table style="border-spacing: 0px; border-right: 2px solid; border-bottom: 2px solid;">
```
できました:sparkles:
![table05.png](https://qiita-image-store.s3.amazonaws.com/0/188980/481b351b-2209-7393-a882-7563c114e011.png)

# 最終的に出来上がったHTML/CSS
HTML部分がとてもすっきりしました。
CSS部分はもう少しリファクタリングできそうですが、今日のところはこの辺で。

```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="Shift_JIS">
  <title></title>
  <style type="text/css">
  <!--
    td {
      border: 2px solid;
      border-right: 0px;
      border-bottom: 0px;
    }
    table {
      border-right: 2px solid;
      border-bottom: 2px solid;
    }
  //-->
  </style>
</head>

<body>

  <table style="border-spacing: 0px;">
    <tr>
      <td>セル１１</td>
      <td>セル１２</td>
      <td>セル１３</td>
    </tr>
    <tr>
      <td>セル２１</td>
      <td>セル２２</td>
      <td>セル２３</td>
    </tr>
    <tr>
      <td>セル３１</td>
      <td>セル３２</td>
      <td>セル３３</td>
    </tr>
  </table>

</body>
</html>
```