ホーム(記事一覧)へ

CSS 表tableに下線を引く方法

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

CSSを利用して表(table)に下線を引く方法を解説します。

結論: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: 1px solid #999;
    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: 1px solid #999;
    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: 1px solid #999;
}

.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にborder-bottom

行ごとの下線

thとtdにborder-bottom

タイトルのみ下線

thだけにborder-bottom

以上、CSSを利用して表(table)に下線を引く方法でした。

関連記事