うーん・・・

[CSS]tableでtd同士だけ行ごとに余白を付けて、中の縦罫線だけ点線にする

締切済

質問者：akkun_44
質問日時：2021/03/19 09:35
回答数：5件

以前、似たような質問
https://oshiete.goo.ne.jp/qa/8734837.html
があったのですが、上記のと
今回私がやりたいことは少し違っていて、
・最初のTHと、最初のTDの行間はくっついている
・TD同士は行間が空いている
・TH,TDともに、内側の縦罫線は点線（dotted）。外枠の方は実線（solid）
という要求のものとなります。

イメージは（罫線に点線がなかったので、太さで表しています）
┏━┯━┯━┓
┃　│　│　┃　ここはTH
┣━┿━┿━┫
┃　│　│　┃　ここはTD
┗━┷━┷━┛
（行間があく）
┏━┯━┯━┓
┃　│　│　┃　ここはTD
┗━┷━┷━┛
（行間があく）
┏━┯━┯━┓
┃　│　│　┃　ここはTD
┗━┷━┷━┛

こんな感じでTD同士は間が空いている（横の罫線が上下で独立しているという感じでもあります）
かつ、内側は外側と違う罫線（今回は点線）にしたいのです。

border-collapse: separate;とか色々組み合わせてるんですがうまく行かず、、、
TD同士だけ、というのができないことと（上記の質問だとTHとも離れてしまう）
内側だけ点線が同時に利用できない感じがしているのです。

tableタグではなく、CSSのdisplayのtableでできる手段でもかまいません。

どうでしょうか？アドバイスをよろしくおねがいします。

ふと思いついたのが
「行間として空ける」という考えではなく、
「行間の代わりに、実質、透明のセルを間に挟む」という思考の転換をしてみました。

<tr><th></th></tr> //普通のTR
<tr><td></td></tr> //普通のTD
<tr><td 透明></td></tr> //行間用のTD
<tr><td></td></tr> //普通のTD
<tr><td 透明></td></tr> //行間用のTD
続く、、、

こんな感じです。

この考え方だったら、
border-collapse: collapse;
td:nth-child(odd)　{透明}
とかにしてできるのでしょうか？

補足日時：2021/03/19 12:29
通報する
ありがとうございます。
やはり厳しいのですね。
ちなみに、補足の方のやり方ではどうでしょうか、、、？

No.1の回答に寄せられた補足コメントです。補足日時：2021/03/19 12:35
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： Ogre7077
回答日時：2021/03/19 16:49

案1. 空行を差し込む

- 0
- 件

通報する

No.4

回答者： t_fumiaki
回答日時：2021/03/19 13:51

No.3様の方法で良いと思いますよ。

純粋にtableだけでは無理ですので・・・。

- 0
- 件

通報する

参考程度に

No.3

回答者： fujillin
回答日時：2021/03/19 13:21

こんにちは

table表示のままで実現するのは難しそうですね。
gridレイアウトの方が近いかとも思いましたが、（私が）詳しくはないので、多少はわかるflexでレイアウトしてみました。

こんな感じではいかがでしょうか？
※ table表示ではなくなっていますので、tdの幅等は自分で制御する必要があります。
（サンプルでは一律に5emにしてあります。）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
table {
display: block;
border-collapse: collapse;
}
tbody {
display: flex;
flex-direction: column;
}
tr:nth-child(n+3) { padding-top: 20px; }

th, td {
width: 5em;
text-align: center;
border-top: 2px solid black;
border-left: 1px dotted black;
}
td:nth-child(n+1) { border-bottom: 2px solid black; }
th:first-child, td:first-child { border-left: 2px solid black; }
th:last-child, td:last-child { border-right: 2px solid black; }
</style>
</head>
<body>

<table>
<tbody>
<tr><th>項目1</th><th>項目2</th><th>項目3</th></tr>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</tbody>
</table>

</body>
</html>

- 0
- 件

通報する

No.2

回答者： t_fumiaki
回答日時：2021/03/19 12:55

ん～・・・。

問題は、セルとセルの境界を点線にする部分です。
「境界を1本線」と言うタグやcssが無いのです。

セル間の隙間を1pxにしてtd周りの境界幅を0にして、全体を塗り潰して、td背景を白にする。
こうやって、見かけ上、セル境界が1本線に見える。

としか出来ないのです。

下図で
上：セル間の幅を設定し、セルに境界を付けた図
下：テーブル全体を塗り潰し、セル境界を0にしてセル背景を白にした。