Edited at

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

More than 1 year has passed since last update.


はじめに

以下のようなHTML(とCSS)を書いてみます。

<!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>セル11</td>
<td>セル12</td>
<td>セル13</td>
</tr>
<tr>
<td>セル21</td>
<td>セル22</td>
<td>セル23</td>
</tr>
<tr>
<td>セル31</td>
<td>セル32</td>
<td>セル33</td>
</tr>
</table>
</body>
</html>

ブラウザで表示するとこんな感じ :arrow_down:

table02.png

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

<table style="border-spacing: 0px;">

そうすると、こんな感じ :arrow_down:

table01.png

はい、セル同士がくっついた結果、borderもくっついて、太く見えるようになってしまいました :scream:

これをCSSで解決していきます。


おことわり

デザイナーさんにとっては朝飯前だと思うのですが、個人的には、初めて知った時にものすごく感動したんです・・・。

あと、普通はreset.css的なものを適用するので、素のHTMLにCSSを当て込むことはほとんどないと思います。


1.縦のborderを細くする

この状態から:arrow_down:まずは縦のborderを細くしましょう。

table01.png

セルが隣り合っている部分で太く見えてしまっているので、セル11やセル21、セル12の右側のborderを外してみます。

というわけで、以下:arrow_down:のCSSを追記。

td {

border: 2px solid;
border-right: 0px; /* 追記箇所 */
}

縦のborderがすっきりしましたね:star2:

しかし、一番右側のセル13やセル23の右borderまで消えてしまいました・・・(当然ですけどね)。

table03.png


2.横のborderを細くする

消えた右borderのことはいったん置いといて、横borderの対応をします。

横borderもセルの隣接部分が太く見えてしまっているので、セル11やセル21の下borderを外すように以下のCSSを追記 :pencil2:

td {

border: 2px solid;
border-right: 0px;
border-bottom: 0px; /* 追記箇所 */
}

はい、横borderもすっきりしました:pig:

ただし、縦borderを対応したとき同様、セル31やセル32の下borderも消えています(そういうCSSを書いてるので当然)。

table04.png


3-1.消えたborderを適用しなおす

適用しなおすborderと、対象のセルを整理します。

・右borderをつけたい :arrow_right:セル13、セル23、セル33

・下borderをつけたい :arrow_right:セル31、セル32、セル33

これをもとに、borderを適用していきます。

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

<!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>セル11</td>
<td>セル12</td>
<td style="border-right: 2px solid;">セル13</td>
</tr>
<tr>
<td>セル21</td>
<td>セル22</td>
<td style="border-right: 2px solid;">セル23</td>
</tr>
<tr>
<td style="border-bottom: 2px solid;">セル31</td>
<td style="border-bottom: 2px solid;">セル32</td>
<td style="border-right: 2px solid; border-bottom: 2px solid;">セル33</td>
</tr>
</table>

</body>
</html>

table05.png

・・・きれいになったけどね?

ちょっとこれは、美しくない:droplet:

この方法だと、一番右のtdタグと一番下のtdタグだけに別のCSSを当てないといけないです。

(HTMLの中に直接CSSを書いているのは、一旦置いといて:sweat_smile:

それに、tdタグの数が縦・横で可変だと、適用させたいtdタグがわからなくなります。


3-2.tableタグにborderをつける

では、美しくborderを適用し直すにはどうしたらいいか。

tableタグのborderを使えばいいのです:exclamation:

この状態のtableタグに:arrow_down:

table04.png

こうして:arrow_down:borderのスタイルを追加すると・・・:question:

<table style="border-spacing: 0px; border: 2px solid #FF6600;">

table06.png

このように、table全体がborderで囲まれました。

※わかりやすくするために、オレンジ色のスタイルを適用しています。

あとは、2重になってしまった上と左を消します。

やっつけ感ありますが、とりあえず「上と左を消す=右と下だけ適用する」ようにスタイルを書き換えます:arrow_down:

※オレンジの色指定も外しました。

<table style="border-spacing: 0px; border-right: 2px solid; border-bottom: 2px solid;">

できました:sparkles:

table05.png


最終的に出来上がったHTML/CSS

HTML部分がとてもすっきりしました。

CSS部分はもう少しリファクタリングできそうですが、今日のところはこの辺で。

<!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>セル11</td>
<td>セル12</td>
<td>セル13</td>
</tr>
<tr>
<td>セル21</td>
<td>セル22</td>
<td>セル23</td>
</tr>
<tr>
<td>セル31</td>
<td>セル32</td>
<td>セル33</td>
</tr>
</table>

</body>
</html>