ホーム(記事一覧)へ

CSSで表tableの罫線の一部を変更する方法

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

表の一部のマスや行・列に点線、太い線、色を変えたいなど、CSSで表tableの罫線の一部を変更する方法を解説します。

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

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

まずhtmlのtableにborder属性で1を指定する方法です。

これについてはいずれCSSのborderで上書きするので、ないものと思いましょう。

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

これはNGです。これは線ではないためCSSのborderで上書きできず、罫線の一部を変更できません。

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

タイトル1 タイトル2 タイトル3
マス1 マス2 マス3
マス4 マス5 マス6
<style>
.example{
    margin: 10px;
    border: none;
    border-spacing: 0;
}
.example th,.example td{
    padding: 10px;
    border: none;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
}
.example tr:first-child th,.example tr:first-child td{
    border-top: 1px solid #999;
}
.example th:first-child,.example td:first-child{
    border-left: 1px solid #999;
}
</style>

<table class="example">
    <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:first-child」は一行目を指します。一行目のマスの上に線を引きます。

「th:first-child」「td:first-child」は一列目を指します。一列目の左に線を引きます。

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

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

この表を基本として罫線の一部を変更していきます。

【方法1】classを使う

thやtdに特定のclassをつけ、borderを上書きしましょう。

タイトル1 タイトル2 タイトル3
マス1 マス2 マス3
マス4 マス5 マス6
<style>
.redboldright{
    border-right: 2px solid red !important;
}
.bluedashbottom{
    border-bottom: 3px dashed blue !important;
}
.greendottop{
    border-top: 4px dotted green !important;
}
</style>

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

borderの方向は上書きするように同じ方向を指定しましょう。

マス単位で指定したい場合におススメの方法です。

しかし、classだらけのhtmlはどうもスッキリしない、というかたは次以降の方法もおススメです。

【方法2】thを使う

タイトル部分と数値部分の境目をはっきり区別したい、というときはthにborderを指定してしまうことをオススメします。

タイトル1 タイトル2 タイトル3
マス1 マス2 マス3
マス4 マス5 マス6
<style>
.example th{
    border-bottom: 2px solid red !important;
}
</style>

<table class="example">
    <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>

余計なclassやhtml属性もなくシンプルでスッキリしますね。

【方法3】疑似クラスで行・列を指定する

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

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

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

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

疑似クラスを使って、行・列に線を引いてみましょう。

マス1 マス2 マス3 マス4
マス5 マス6 マス7 マス8
マス9 マス10 マス11 マス12
マス13 マス14 マス15 マス16
<style>
.example td:nth-of-type(2){
    border-right: 3px dashed blue;
}
.example tr:nth-last-of-type(2) td{
    border-bottom: 2px solid red;
}
</style>

<table class="example">
    <tr>
        <td>マス1</td>
        <td>マス2</td>
        <td>マス3</td>
        <td>マス4</td>
    </tr>
    <tr>
        <td>マス5</td>
        <td>マス6</td>
        <td>マス7</td>
        <td>マス8</td>
    </tr>
    <tr>
        <td>マス9</td>
        <td>マス10</td>
        <td>マス11</td>
        <td>マス12</td>
    </tr>
    <tr>
        <td>マス13</td>
        <td>マス14</td>
        <td>マス15</td>
        <td>マス16</td>
    </tr>
</table>

これは2列目つまり2番目のtdの右に線を引いたものと、

最後から2行目つまり最後から2番目のtr内のtdの下に線を引いたものです。「:nth-last-of-type(n)」を使うと下からn番目という指定もできます。

まとめ

【前提】CSSのborderを使った表を作りましょう。変更したい線をborderで上書きします。

【方法1】classを使う
マス単位で指定したい場合

【方法2】thを使う
タイトル部分だけに線を引きたい場合

【方法3】疑似クラスで行・列を指定する
n番目の行や列を指定したい場合は「F:nth-of-type(n)」などの疑似クラスを使って指定しましょう。

以上、CSSで表tableの罫線の一部を変更する方法でした。

関連記事