【CSS】tableなどのborderの重なりを消す(重ねる)方法

borderを指定してブロック要素やtableのtdが連続すると重なった部分だけ線が太くなる！同じ線幅にしてすっきりさせたい！

そんなborderの重なりを消す(重ねる)方法を紹介します。

ブロック要素のborderの重なりを消す

変に重なった状態

ブロック要素にborderを指定して並べると、連続した部分が重なり2倍になります。

• border
• border
• border
• border
• border

<style>
.border0 li{
    border: 1px solid #333;
    margin: 0;    
    padding: 10px;
    background: #f2f2f2;
}
.border0{
    list-style: none;
    padding: 0;
}    
</style>
<ul class="border0">
    <li>border</li>
    <li>border</li>
    <li>border</li>
    <li>border</li>
    <li>border</li>
</ul>

この重なりを消してすっきりさせる方法を紹介します。

方法1.マイナスマージンで線を重ねる

marginで線の幅分マイナス指定すると線を重ねることができます。

• border
• border
• border
• border
• border

<style>
.border1 li{
    border: 1px solid #333;
    /*コレ*/margin: 0 0 -1px;    
    padding: 10px;
    background: #f2f2f2;
}
.border1{
    list-style: none;
    padding: 0;
}    
</style>
<ul class="border1">
    <li>border</li>
    <li>border</li>
    <li>border</li>
    <li>border</li>
    <li>border</li>
</ul>

手っ取り早いですが、マイナスマージンはできるだけ使いたくないというかたは次の方法をご利用ください。

方法2.線の一方を消して最後だけ加える

上・右・左の線がある状態で並べます。

最後の要素にだけ下の線を加えます。

• border
• border
• border
• border
• border

<style>
.border2 li{
    border: 1px solid #333;
    /*コレ*/border-bottom: none;
    margin: 0;
    padding: 10px;
    background: #f2f2f2;
}
.border2 li:last-child{
    border-bottom: 1px solid #333;
}
.border2{
    list-style: none;
    padding: 0;
}    
</style>
<ul class="border2">
    <li>border</li>
    <li>border</li>
    <li>border</li>
    <li>border</li>
    <li>border</li>
</ul>

最後の要素でなくても親要素（ul）の下の線を加える、でもアリです。

線の一部を消す方法はこちらをご覧ください。

table tdのborderの重なりを消す

方法1.tableは右と下、tdは上と左の線を指定

先に紹介した「線の一方を消して最後だけ加える」方法の応用です。

tdの一方（上）の線を指定します。

border	border
border	border

すると左右の線がないので左も指定します。

border	border
border	border

これだと一番下と一番右に線がないので外側であるtableに下と右の線を指定します。

border	border
border	border

線と線の間に隙間がありますから、border-spacing: 0を指定して隙間をなくします。

border	border
border	border

これで完成です。

<style>
table[border="1"] td{
    border-top: 1px solid #333;
    border-left: 1px solid #333;
}
table[border="1"]{
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    border-spacing: 0;
}
</style>
<table border="1">
    <tr>
        <td>border</td>
        <td>border</td>
    </tr>
    <tr>
        <td>border</td>
        <td>border</td>
    </tr>
</table>

html5からtableにおけるborder属性は線があるかないかを判断するための属性となりました。

よって属性なしなら線なし、border="1"なら線あり、2以上は使わないことが推奨されています。

table[border="1"]のように属性セレクタを使うことでクラス指定が不要であり、CMSなどでも簡単に線の有り無しを指定できます。

方法2.背景とborder-spacingで疑似的な線を作る

tableに線の色となる背景色を指定します。

tdには白を指定します。

border-spacingで指定した数値が線の幅となります。

border	border
border	border

<style>
table.border7{
    background: #333;
    border-spacing: 1px;
}
table.border7 td{
    background: #FFF;
}
</style>
<table class="border7">
    <tr>
        <td>border</td>
        <td>border</td>
    </tr>
    <tr>
        <td>border</td>
        <td>border</td>
    </tr>
</table>

やろうと思えばhtmlだけでもできますし、コードが少ないというメリットはありますが、非推奨です。

border-spacingは隙間を指定するためであり線を引くものではありません。

印刷時に背景を消すと線が印刷されなくなります。

まとめ

ブロック要素のborderの重なりを消す方法

1. マイナスマージンでくっつける
2. 線の一方を消して最後だけ加える

table tdのborderの重なりを消す

tableは右と下、tdは上と左の線を指定

以上、borderの重なりを消す(重ねる)方法でした。