【CSS】tableの枠線を下だけ、横線だけ引く方法

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

「表全体の線じゃなくて下線だけ引きたいんだけどどうすればいいんだろう？」

tableの枠線borderを下だけに引く(下線を引く)方法を解説します。

結論：border-bottomを利用する

border-bottomは下線を引くCSSです。これを使えば表にて下線を引くことができます。

borderの使い方がよくわからないかたはこちらをごらんください。

tableにはborder="1"と指定すると線を引けますが、これを指定すると表全体に線を引いてしまします。

下線だけ引きたいならborderは指定しないか、0を指定しましょう。

下記より具体例を挙げて説明します。

表全体の下線

表全体に下線を引きたいときはtableに対してborder-bottomを指定しましょう。

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

<style>
.example{
    border-bottom: 2px solid #000;
    background: #f2f2f2;
}

.example th,.example td{
    padding: 10px;
}
</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にborder-bottomを指定しましょう。

行と言えばtrですが、trは効かないCSSが多いためCSSを指定しないほうが無難です。

また、tableに「border-spacing: 0」を指定することでtd間の隙間をなくすことができます。

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

<style>
.example2{
    background: #f2f2f2;
    border-spacing: 0;
}

.example2 th,.example2 td{
    border-bottom: 2px solid #000;
    padding: 10px;
}
</style>

<table 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だけにborder-bottomを指定しましょう。

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

<style>
.example3{
    background: #f2f2f2;
    border-spacing: 0;
}
.example3 th{
    border-bottom: 2px solid #000;
}

.example3 th,.example3 td{
    padding: 10px;
}
</style>

<table 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>

【まとめ】tableの下線を引く方法

表全体の下線

tableにborder-bottom

行ごとの下線

thとtdにborder-bottom

タイトルのみ下線

thだけにborder-bottom

以上、tableの枠線borderを下だけに引く(下線を引く)方法でした。