【CSS/html】tableの内側だけ線を引く方法

「tableの外側の線を消して、内側だけに線を引きたい！」

tableの内側だけ線を引く方法を解説します。

tableの内側だけ線を引く

tableの内側だけ線を引くには以下のような指定をします。

見出しセル	見出しセル	見出しセル
データセル	データセル	データセル
データセル	データセル	データセル

<style>
table{
    border-collapse: collapse;
    border: none;
}
td,th{
    border: none;
    border-left: 1px solid #333;
    border-top: 1px solid #333;
}
td:first-child,th:first-child{
    border-left:none;
}
tr:first-child td,tr:first-child th{
    border-top:none;
}
</style>
<table border class="example">
    <tr>
      <th>見出しセル</th>
      <th>見出しセル</th>
      <th>見出しセル</th>
    </tr>
    <tr>
      <td>データセル</td>
      <td>データセル</td>
      <td>データセル</td>
    </tr>
    <tr>
      <td>データセル</td>
      <td>データセル</td>
      <td>データセル</td>
    </tr>
</table>

下記より詳しく解説します。

【手順1】tableとtd,thの線を消す

tableの内側だけ線を引く、つまりtableの外側の線を消すのですから、tableから線を消すのはイメージできるでしょう。

tdとthについても4方向すべてに線が引いていると結局外側すべてに線が引かれている状態になります。

いったん全部の線を消しましょう。

table{
    border-collapse: collapse;
    border: none;
}
td,th{
    border: none;
}

「border-collapse: collapse」はセルの隙間をなくすためのCSSです。

「border-spacing: 0」でもOKです。

CSS borderがわからない！というかたは下記をよんでください。

【手順2】tdとthの左と上に線を引く

tdとthの左と上に線を引きましょう。

td,th{
    border: none;
    border-left: 1px solid #333;
    border-top: 1px solid #333;
}

下記のような状態になります。

見出しセル	見出しセル	見出しセル
データセル	データセル	データセル
データセル	データセル	データセル

これでtableの外側の右と下の線が消えました。

しかし左と上の線が残っています。これも消していきましょう。

【手順3】1列目のtdとthの左の線を消す

tableの左の線を消すには1列目のtdとthの左の線を消すことです。

「1列目」を指定するには「td:first-child」と指定します。1つめのtdは必ず1列目だからです。

td:first-child,th:first-child{
    border-left:none;
}

下記のような状態になります。

見出しセル	見出しセル	見出しセル
データセル	データセル	データセル
データセル	データセル	データセル

【手順4】1行目のtdとthの上の線を消す

tableの上の線を消すには1行目のtdとthの上の線を消すことです。

「1行目」を指定するには「tr:first-child」と指定します。「tr:first-child」は一つめのtrであり、これは1行目になります。

ただし、trにはborderを指定していないため、その子要素であるtdとthに指定する必要があります。

tr:first-child td,tr:first-child th{
    border-top:none;
}

これで完成です。

見出しセル	見出しセル	見出しセル
データセル	データセル	データセル
データセル	データセル	データセル

【まとめ】tableの内側だけ線を引く方法

1. tableとtd,thの線を消す
2. tdとthの左と上に線を引く
3. 1列目のtdとthの左の線を消す
4. 1行目のtdとthの上の線を消す

以上、tableの内側だけ線を引く方法でした。