ホーム(記事一覧)へ

CSSで表tableの枠線borderを全部・一部消す方法

タイトル1 タイトル2 タイトル3
マス1 マス2 マス3
マス4 マス5 マス6

tableのデザインによっては枠線がいらなくて消したいことがあります。

tableの枠線を消す方法を解説します。全部消す方法、一部消す方法があります。

【前提】CSSのborderを使った表を作る

表に対して通常の線を引く方法はいくつかあります。

1つにtableのマス間に1pxの隙間を空け、背景色を使ってマス線を表現する方法があります。

これはNGです。これは線ではないためCSSのborderで上書きできず、枠線の一部を消すことができません。

よって基本となる表はCSSのborderを使った下記のような表とします。

タイトル1 タイトル2 タイトル3
マス1 マス2 マス3
マス4 マス5 マス6
<style>
table[border="1"]{
	border-spacing:0;
	margin-top: 5px;
	margin-bottom: 5px;
	border: none;
}

table[border="1"] td,table[border="1"] th{
	padding:5px 8px;
	background:#FFF;
	border: none;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
}

table[border="1"] th{
	background:#f9f9f9;
}
table[border="1"] tr:last-child th,table[border="1"] tr:last-child td{
    border-bottom: 1px solid #999;
}
table[border="1"] th:last-child,table[border="1"] td:last-child{
    border-right: 1px solid #999;
}
</style>

<table border="1">
    <tr>
        <th>タイトル1</th>
        <th>タイトル2</th>
        <th>タイトル3</th>
    </tr>
    <tr>
        <td>マス1</td>
        <td>マス2</td>
        <td>マス3</td>
    </tr>
    <tr>
        <td>マス4</td>
        <td>マス5</td>
        <td>マス6</td>
    </tr>
</table>

解説

各マス(th,td)の上と左に線を引きます。

これだけだと表全体の一番下と右に線が引かれません。

「tr:last-child」は一番下の行を指します。最終行のマスの下に線を引きます。

「th:last-child」「td:last-child」は一番右の列目を指します。最終列の右に線を引きます。

これで各マスをborderだけで線を引き切った状態になります。

borderがよくわからない場合は下記をご参照ください。

この表を基本として枠線を消していきます。

tableのborderを全部消す方法

【html】border属性を指定しない

htmlにおいてtableを指定するときborder属性を指定することができます。

border属性には数値を指定するのですが、html5からは「border="1"を指定する」か「border属性を指定しない」の2択となりました。

これは枠線の有無を知らせるための情報となり、線があるならその太さに関わらず「border="1"」を指定します。線のデザインはCSSで指定しましょう。

線がないならborder属性を指定しません。

border="1"を指定

マス1マス2
マス3マス4
<table border="1">
    <tr>
        <td>マス1</td><td>マス2</td>
    </tr>
    <tr>
        <td>マス3</td><td>マス4</td>
    </tr>
</table>

border指定なし

マス1マス2
マス3マス4
<table>
    <tr>
        <td>マス1</td><td>マス2</td>
    </tr>
    <tr>
        <td>マス3</td><td>マス4</td>
    </tr>
</table>

先述した「【前提】CSSのborderを使った表を作る」では「table[border="1"]」という形でCSSのセレクタを指定しています。

これは「border="1"が指定されたtable」という意味です。

「border="1"」を指定していないtableでは自動的に線がひかれないものとなります。

【CSS】tableとtdにborder:noneを指定

CSSのborderで指定された枠線は、同じくborderで消すことができます。

「border:none」または「border:0」を上書きすると線を消せます。

tableの枠線はtableかtd,thに指定しているため、これらに「border:none」を指定しましょう。

タイトル1 タイトル2 タイトル3
マス1 マス2 マス3
マス4 マス5 マス6
<style>
.example,.example td,.example th{
    border: none !important;
}
</style>

<table class="example" border="1">
    <tr>
        <th>タイトル1</th>
        <th>タイトル2</th>
        <th>タイトル3</th>
    </tr>
    <tr>
        <td>マス1</td>
        <td>マス2</td>
        <td>マス3</td>
    </tr>
    <tr>
        <td>マス4</td>
        <td>マス5</td>
        <td>マス6</td>
    </tr>
</table>

tableのborderを一部消す方法

枠線全部を消す方法でも伝えたようにborder:noneで消します。

ただし、消す線を指定する必要があります。

マスの線を消す

thやtdにborder:noneを上書きしましょう。ただし、方向も指定する必要があります。

タイトル1 タイトル2 タイトル3
マス1 マス2 マス3
マス4 マス5 マス6
<table border="1">
    <tr>
        <th>タイトル1</th>
        <th>タイトル2</th>
        <th style="border-right: none;">タイトル3</th>
    </tr>
    <tr>
        <td>マス1</td>
        <td style="border-top: none;">マス2</td>
        <td>マス3</td>
    </tr>
    <tr>
        <td style="border-left: none;">マス4</td>
        <td>マス5</td>
        <td style="border-bottom: none;">マス6</td>
    </tr>
</table>

先に「border-top」や「border-left」などで線を指定しています。それと同じCSSで打ち消しましょう。

消す箇所が多いならclassで消すことをオススメします。

縦線を消す

縦線つまり、マスの左右の線を消すにはth,tdのborder-rightとborder-leftをnoneにします。

タイトル1 タイトル2 タイトル3
マス1 マス2 マス3
マス4 マス5 マス6
<style>
.example2 th,.example2 td{
    border-right: none !important;
    border-left: none !important;
}
</style>

<table border="1" class="example2">
    <tr>
        <th>タイトル1</th>
        <th>タイトル2</th>
        <th>タイトル3</th>
    </tr>
    <tr>
        <td>マス1</td>
        <td>マス2</td>
        <td>マス3</td>
    </tr>
    <tr>
        <td>マス4</td>
        <td>マス5</td>
        <td>マス6</td>
    </tr>
</table>

横線を消す

横線つまり、マスの上下の線を消すにはth,tdのborder-topとborder-bottomをnoneにします。

タイトル1 タイトル2 タイトル3
マス1 マス2 マス3
マス4 マス5 マス6
<style>
.example3 th,.example3 td{
    border-top: none !important;
    border-bottom: none !important;
}
</style>

<table border="1" class="example3">
    <tr>
        <th>タイトル1</th>
        <th>タイトル2</th>
        <th>タイトル3</th>
    </tr>
    <tr>
        <td>マス1</td>
        <td>マス2</td>
        <td>マス3</td>
    </tr>
    <tr>
        <td>マス4</td>
        <td>マス5</td>
        <td>マス6</td>
    </tr>
</table>

特定の横線や縦線を消す

最後のtdに線を引きたい、偶数の列に線を引きたいというときは疑似クラスを駆使しましょう。

疑似クラスを使うと、例えば「2行目」を「tr:nth-of-type(2) td」、「2列目」を「td:nth-of-type(2)」のようにあらわせます。

「F:nth-of-type(n)」は「n番目に現れるF」という疑似クラスです。

疑似クラスはたくさんあるので下記からご確認ください。

疑似クラスを使って、特定の横線や縦線を消してみましょう。

タイトル1 タイトル2 タイトル3
マス1 マス2 マス3
マス4 マス5 マス6
<style>
.example4 tr:nth-of-type(3) td{
    border-top: none !important;
}
.example4 th:nth-of-type(3),.example4 td:nth-of-type(3){
    border-left: none !important;
}
</style>

<table border="1" class="example4">
    <tr>
        <th>タイトル1</th>
        <th>タイトル2</th>
        <th>タイトル3</th>
    </tr>
    <tr>
        <td>マス1</td>
        <td>マス2</td>
        <td>マス3</td>
    </tr>
    <tr>
        <td>マス4</td>
        <td>マス5</td>
        <td>マス6</td>
    </tr>
</table>

これは3行目つまり3番目のtrのtdの上の線を消したものと、3列目つまり3番目のtdの左の線を消したものです。

ちなみに「:nth-last-of-type(n)」を使うと下からn番目という指定もできます。

【まとめ】tableの枠線を消す方法

全部消す

htmlではborder属性の指定をしない

CSSではborder:noneを指定する

一部消す

td,thにborderの方向も含めてnoneを指定する

以上、CSSで表tableの枠線borderを全部・一部消す方法でした。

関連記事