以前、似たような質問
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でできる手段でもかまいません。
どうでしょうか?アドバイスをよろしくおねがいします。
A 回答 (5件)
- 最新から表示
- 回答順に表示
No.5
- 回答日時:
案1. 空行を差し込む
<style>
table { border-collapse:collapse; border:none; }
table tr.space { height:1ex; }
table tr > * { border:1px solid black; border-style:solid dashed; }
table tr > *:first-child { border-left-style:solid; }
table tr > *:last-child { border-right-style:solid; }
</style>
<table><tbody>
<tr><th> name <th> age <th> memo
<tr><td> gry <td> 26 <td> SA
<tr class=space>
<tr><td> ste <td> 28 <td> SB
<tr class=space>
<tr><td> gem <td> 31 <td> MB
</tbody></table>
案2. 表組ではなくグリッド配置に変更
<style>
.grid3 { display:grid; grid:auto-flow/repeat(3,min-content); }
.grid3 > * { margin:0 0 1ex; border:1px solid black; border-left-width:0px; border-right-style:dashed; }
.grid3 > :nth-child(3n+1) { border-left-width:1px; }
.grid3 > :nth-child(3n+3) { border-right-style:solid; }
.grid3 > :nth-child(-n+3) { font-weight:bold; text-align:center; margin-bottom:0; border-bottom:0; }
</style>
<section class=grid3>
<p> name <p> age <p> memo
<p> apricot <p> 11 <p> TG
<p> yanyan <p> 14 <p> TF
<p> iceman <p> 17 <p> TA
</section>
No.3
- 回答日時:
こんにちは
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>
No.2
- 回答日時:
ん~・・・。
問題は、セルとセルの境界を点線にする部分です。
「境界を1本線」と言うタグやcssが無いのです。
セル間の隙間を1pxにしてtd周りの境界幅を0にして、全体を塗り潰して、td背景を白にする。
こうやって、見かけ上、セル境界が1本線に見える。
としか出来ないのです。
下図で
上:セル間の幅を設定し、セルに境界を付けた図
下:テーブル全体を塗り潰し、セル境界を0にしてセル背景を白にした。
No.1
- 回答日時:
相当に面倒ですよ。
理由はtd境界を1本線にするcssもタグも無いからです。
仕方無いから、全体を黒く塗り潰して、tdの背景を白で抜く。
ってやり方を応用しないと出来ません。
時間有ったら、回答しますが・・・・。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- Word(ワード) Word 段落罫線の上下のスペースを広げるには 3 2023/08/04 10:52
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Excel(エクセル) vba セルの罫線について教えてください 2 2022/12/28 17:14
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
cssで、表示されるテキストによ...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
EXCELからhtmlへの変換で罫線が...
-
テーブルのヘッダとボディの幅...
-
テーブルの装飾
-
中に<table></table>が使えるア...
-
HTML <td></td>タグ セル内余...
-
表の中の列の順番を入れ替える...
-
テーブルタグのセルの幅の一部...
-
テーブルのセルにアンカー
-
おしゃれなテーブル
-
テーブルの外側の線を消す
-
テーブル結合 縦横両方するには?
-
htmlのtable内に画像
-
表の1列だけをCSSを使って右揃...
-
テーブルの入れ子について
-
文字の中央そろえを一括で指定...
-
テーブルの任意の列を非表示に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
HTML <td></td>タグ セル内余...
-
テーブルのヘッダとボディの幅...
-
文字列が入っているtdを削除せ...
-
テーブルのセルに画像をピッタ...
-
テーブルの行の高さを指定する...
-
テーブルの表示がずれます
-
ホームページ 表の上の余白を...
-
テーブルのセルにアンカー
-
テーブルタグのセルの幅の一部...
-
逆L字の表(table)組み
-
中に<table></table>が使えるア...
-
tableでcolspanを使うと次行以...
-
スタイルシートで colspan=3と...
-
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) {透明}
とかにしてできるのでしょうか?
ありがとうございます。
やはり厳しいのですね。
ちなみに、補足の方のやり方ではどうでしょうか、、、?