【html/CSS】tableの枠線borderを全部・一部消す方法

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

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

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

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

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

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

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

<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がよくわからない場合は下記をご参照ください。

CSS border(枠線)の使い方と種類一覧

CSS borderおよびborderに関連するCSSプロパティの種類一覧を実例とともに紹介します。

この記事を読む

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

tableのborderを全部消す方法

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

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

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

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

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

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

<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」を指定しましょう。

<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を上書きしましょう。ただし、方向も指定する必要があります。

<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にします。

<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にします。

<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」という疑似クラスです。

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

CSSセレクタ一覧【擬似要素,擬似クラス,属性セレクタ】

主要ブラウザで使えるセレクタ等の一覧です。主要ブラウザで使えるセレクタ等の一覧です。CSSの記述例と実行例もあります。

この記事を読む

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

<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を全部・一部消す方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む