罫線の代わりに空白で仕切った形の表を作りたい

罫線の代わりに空白で仕切った形のtableを作りたいと考えています。
まず次のコードを書きました。

HTML
<table>
　<tr>
　　<th rowspan="2">営業日時</th>
　　<td class="day">月～金</td>
　　<td class="am">午前8:30～12:30</td>
　　<td class="pm">午後03:00～06:30</td>
　</tr>
　<tr>
　　<td class="day">土</td>
　　<td class="am">午前8:30～12:30</td>
　</tr>
　<tr class="holiday">
　　<th>休業日</th>
　　<td class="day">日・祝</td>
　</tr>
</table>

CSS
table {
    border-top: 1px solid;
    border-bottom: 1px solid;
}

th {
    border-right: 1px solid;
}

次に
●営業日時の行とそのうえに引かれているtableのborderの間
●休業日の行とそのしたに引かれているtableのborderの間
●営業日時の行と休業日の行の間

の3か所を少しずつ離し、罫線の代わりに空白をいれて見やすくしたいと考えています。

上下のtableのborderについては

table {
    padding-top: 10px;
    padding-bottom: 10px;
}

として、borderとコンテンツを区分して見やすくできました。

しかし営業日時の行と休業日の行を空白で分ける方法が分かりません。
ためしに

.holiday {
    margin-top: 10px;
}

としても全く空白ができず悩んでいます。

また先ほどtable上下の空白に関してはpadding-top、padding-bottomで空白を作りましたが、
空白を作る方法としてこの方法が良いのかどうかも迷っています。

質問は以上です。
よろしくお願いします。

＜追記＞
thの右側に縦線がなければ、tdにpaddingを入れることで上下の行の間隔が広がるのですが、
thの右側に縦線があるため、paddingだと縦線が長くなってしまい、望んでいる形ではなくなります。

わたしが希望しているのは
営業日時の縦線と休業日の縦線もきちんと分かれ、隙間ができる形にしたいです。

Lhankor_Mhy

2020/11/02 09:53

border-spacing ではダメなんですよね？

cheshire-cat

2020/11/02 10:05

border-spaceingというのをよく知らないのですが、適切な使い方であれば、どのような方法でも構いません。

Lhankor_Mhy

2020/11/02 10:15

言葉が足りなかったようです。テーブルの行間を開けるのであれば border-spacing を設定するのが一般的ですが、そのレイアウトだと他の行間にも影響があるので目的のデザインにならない、という理解でいいのですよね？

cheshire-cat

2020/11/02 10:18

空けたいのは営業日時と休業日の間だけなので、ほかの場所まで広がってしまうのであれば不可です。

Lhankor_Mhy

2020/11/02 10:30

テーブルの行間を個別に指定する方法はないと思います。ダミーの空白行を入れて隙間を開けるか、ボーダーをあきらめて、背景で縦線を入れるか、ぐらいの方法しかないような気がします。

cheshire-cat

2020/11/02 10:31

わかりました。ありがとうございます。

行動規範の内容に同意します

回答2件

ベストアンサー

border では難しそうなので、疑似要素で表現してみました。いかがでしょうか。

css
1table {
2  border-top: 1px solid;
3  border-bottom: 1px solid;
4  padding-top: 5px;
5  padding-bottom: 5px;
6}
7
8th {
9  padding: 5px;
10  position: relative;
11}
12
13th::after {
14  content: "";
15  display: block;
16  position: absolute;
17  width: 1px;
18  top: 5px;
19  bottom: 5px; 
20  right: 0;
21  background-color: black;
22}

投稿2020/11/02 10:29

総合スコア34075

2020/11/02 10:48

なるほど、たしかに縦線が短くなりましたね。こんなに労力を費やしていただいて申しわけありません。ただ、さすがにここまではちょっと書く気にはなれないです(汗) Lhankor_Mhyさんも書いていますが、特定の行だけ空けるのは難しそうですね。わたしは今回の問題の難しさがよくわかっておらず、てっきり簡単に書く方法があるのだと思っていました。今回の問題がこんなに難しいのであれば、他のほかの方法を採りたいと思います。

行動規範の内容に同意します