【CSS/html】tableを点線にする方法

tableの線は普段実線にしますが、点線にする必要があることもあるでしょう。

tableを点線にする方法を解説します。

全部点線

実線は「border-style:solid」ですが、点線にするには「border-style:dashed」を指定します。

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

<style>
table{
    border:1px dashed #999;
    border-collapse: collapse;
}
td,th{
    border:1px dashed #999;
}
</style>
<table border>
    <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>

「border-style:dotted」にするともっと細かい点線になりますし、「border-style:double」にすると二重線にもできます。

線の引き方についてはこちら↓

内側だけ点線

「border-collapse: collapse」はtableとtd,thの線を共有にするCSSです。

この状態でtableを実線（solid）、td,thを点線（dashed）にすると内側だけ点線になります。

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

<style>
table{
    border:1px solid #999;
    border-collapse: collapse;
}
td,th{
    border:1px dashed #999;
}
</style>
<table border>
    <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>

内側の横線だけ点線

上記の「内側だけ点線」の方法をベースにします。td,thの線をまず実線（solid）にし、上と下の線を点線（dashed）にします。

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

<style>
table{
    border:1px solid #999;
    border-collapse: collapse;
}
td,th{
    border:1px solid #999;
    /*コレ*/border-bottom: 1px dashed #999;
    /*コレ*/border-top: 1px dashed #999;
}
</style>
<table border>
    <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>

内側の縦線だけ点線

同じく「内側だけ点線」の方法をベースにします。今度はtd,thの左と右の線を点線（dashed）にします。

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

<style>
table{
    border:1px solid #999;
    border-collapse: collapse;
}
td,th{
    border:1px solid #999;
    /*コレ*/border-left: 1px dashed #999;
    /*コレ*/border-right: 1px dashed #999;
}
</style>
<table border>
    <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>

外側だけ点線

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

<style>
table{
    border:1px dashed #999;
    border-spacing: 0;
}
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>
    <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>

先述した「内側だけ点線」の方法を逆にすれば外側だけ点線になりそうなものですが、これではうまくいきません。

下記「内側だけ線を引く方法」を応用して、外側だけ点線、内側だけ実線の状態を作ります。

任意の箇所を点線

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

<style>
table{
    border: none;
    border-spacing: 0;
    margin: 10px;
}
td,th{
    border: none;
    border-left: 1px solid #333;
    border-top: 1px solid #333;
}
td:last-child,th:last-child{
    border-right: 1px solid #333;
}
tr:last-child td,tr:last-child th{
    border-bottom: 1px solid #333;
}
.dashed-left{
    border-left: 1px dashed #333 !important;
}
.dashed-top{
    border-top: 1px dashed #333 !important;
}
.dashed-right{
    border-right: 1px dashed #333 !important;
}
.dashed-bottom{
    border-bottom: 1px dashed #333 !important;
}
</style>
<table border>
    <tr>
      <th class="dashed-top">見出しセル</th>
      <th>見出しセル</th>
      <th class="dashed-right">見出しセル</th>
    </tr>
    <tr>
      <td>データセル</td>
      <td class="dashed-left">データセル</td>
      <td>データセル</td>
    </tr>
    <tr>
      <td class="dashed-top dashed-left">データセル</td>
      <td>データセル</td>
      <td class="dashed-right dashed-bottom">データセル</td>
    </tr>
</table>

任意の箇所を点線にするにはtableには線を引かず、すべてtd,thに引きます。

ただし、外側を点線にしない場合はこの限りではありません。

tableの線を消し、td,thの左と上に線を引きます。

これだけでは表の右と下の線がないので最終列の右線、最終行の下線をひきます。

本題の「任意の点線」にはclassを指定します。

基本は左か上に線を引きます。

ただし。表の右、下の線を点線にしたいときだけは右、下に点線を引きます。