下記のXDnoスクリーンショットの表をHTMLのtableで作成しているのですが、マス目のの余白が全て同じではなく、そこが再現できなくて困っています。
こういったものはtableタグでは再現が難しいのでしょうか?
マスのtd,th,trにmarginが設定できないのと、全て均等な余白を作るborder-spacingだと作れませんので、どうやってコーディングしたらよいのか教えて頂きたいです。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。

回答2件
0
先程の回答は border-collapse: collapse
の挙動を勘違いしていたので、コメントでご指摘された通りの問題がありました。修正版を提示します。
html
1<div> 2<table> 3 <thead> 4 <tr> 5 <th></th> 6 <th>1</th> 7 <th>2</th> 8 <th>3</th> 9 </tr> 10 </thead> 11 <tbody> 12 <tr> 13 <th>A</th> 14 <td>A1</td> 15 <td>A2</td> 16 <td>A3</td> 17 </tr> 18 <tr> 19 <th>B</th> 20 <td>B1</td> 21 <td>B2</td> 22 <td>B3</td> 23 </tr> 24 <tr> 25 <th>C</th> 26 <td>C1</td> 27 <td>C2</td> 28 <td>C3</td> 29 </tr> 30 </tbody> 31</table> 32</div>
css
1div { 2 display: inline-block; 3 border: 1px solid red; 4 background: #ddd; 5} 6table { 7 border-collapse: separate; 8 border-spacing: 0; 9 margin: 20px; 10 background: #fff; 11} 12th, td { 13 box-sizing: content-box; 14 padding: 5px 10px; 15 text-align: center; 16 vertical-align: middle; 17} 18thead th { 19 width: 140px; 20 height: 50px; 21 background: #ffb157; 22} 23thead th:first-child { 24 width: 120px; 25 background: none; 26} 27tbody th { 28 height: 50px; 29 background: #617fd1; 30} 31tbody td { 32 background: #fff3e5; 33} 34/* 3列目以降の左に青線 */ 35tr *:nth-child(n+3) { 36 border-left: 24px solid blue; 37} 38/* 2列目の左に赤線 */ 39tr *:nth-child(2) { 40 border-left: 10px solid red; 41} 42/* tbodyの2列目以降の上に緑線 */ 43tbody tr:nth-child(n+2) * { 44 border-top: 8px solid green; 45} 46/* tbodyの1列目の上に紫線 */ 47tbody tr:nth-child(1) * { 48 border-top: 8px solid purple; 49}
解説
先程の問題点
先程のバージョン https://codepen.io/arcxor/pen/VwrLqOL では border-collapse: collapse
を前提に書いてしまっていました。これだとセル間の枠線が結合された状態となり、結果的に「枠線が別レイヤーで上に乗っているような状態」となってしまいます。
先程のコードの border を太くすると https://codepen.io/arcxor/pen/OJOVeLo のようになります。分かりやすいですが、セルの領域が明らかに潰されたようになってしまっています。
border-collapse: collapse
は(エクセルのような)1px など均一の太さの枠線をつける際には便利ですが、異なる太さの枠線をつける際には使わない方がよいかもしれません。border-collapse: separate
(既定値)を使いましょう。
修正版のコード
border-collapse: separate
を前提に、セル(th と td)の上と左に枠線をつけることでデザインを再現しています。
セルが潰されていないかを確認するためにデザインよりも太い縦線を入れています。期待通り、枠線の有無・太さによらず、どのセルも同じ幅・高さになっています。
また box-sizing: border-box
を指定してしまうと、一部に付けた border の分だけセルの幅・高さが減ってしまうため、box-sizing: content-box
(既定値)を指定しています。
補足
- https://codepen.io/arcxor/pen/GROJbqB (セルの幅が伸びる)
- https://codepen.io/arcxor/pen/WNXvqGB (セルの幅を固定する)
セルに長い文字列などが入った場合、このCSSだと内容に応じてセルの幅が拡張されてしまいます。これを防ぐためにはセル(th, td)に対して word-break: break-all
を指定します。
セルの幅を決め打ちするのではなく、テーブル全体の幅を決める方法も考えられます。その場合は th, td への width 指定をせずに(一部のセルに width を指定してもよい)、table に対して width
と table-layout: fixed
を指定します。
参考
CSSプロパティ等の詳細は MDN ドキュメントをご覧ください。
投稿2022/01/28 20:08
編集2022/01/28 20:14総合スコア2857
0
ベストアンサー
html
1<div> 2<table> 3 <thead> 4 <tr> 5 <th></th> 6 <th>1</th> 7 <th>2</th> 8 <th>3</th> 9 </tr> 10 </thead> 11 <tbody> 12 <tr> 13 <th>A</th> 14 <td>A1</td> 15 <td>A2</td> 16 <td>A3</td> 17 </tr> 18 <tr> 19 <th>B</th> 20 <td>B1</td> 21 <td>B2</td> 22 <td>B3</td> 23 </tr> 24 <tr> 25 <th>C</th> 26 <td>C1</td> 27 <td>C2</td> 28 <td>B3</td> 29 </tr> 30 </tbody> 31</table> 32</div>
css
1div { 2 display: inline-block; 3 border: 1px solid red; 4 background: #ddd; 5} 6table { 7 margin: 20px; 8 border-collapse: collapse; 9 background: #fff; 10} 11th, td { 12 box-sizing: border-box; 13 padding: 4px 8px; 14 text-align: center; 15 vertical-align: middle; 16} 17thead th { 18 width: 160px; 19 height: 60px; 20 background: #ffb157; 21} 22thead th:first-child { 23 width: 140px; 24 background: none; 25} 26tbody th { 27 height: 50px; 28 background: #617fd1; 29} 30tbody td { 31 background: #fff3e5; 32} 33/* 3列目以降の左に青線 */ 34tr *:nth-child(n+3) { 35 border-left: 16px solid blue; 36} 37/* 2列目の左に赤線 */ 38tr *:nth-child(2) { 39 border-left: 10px solid red; 40} 41/* tbodyの2列目以降の上に緑線 */ 42tbody tr:nth-child(n+2) { 43 border-top: 8px solid green; 44} 45/* tbodyの1列目の上に紫線 */ 46tbody tr:nth-child(1) { 47 border-top: 8px solid purple; 48}
テーブルセル間の余白はセルに対する border で表現します。この例ではセルの上と左に border を付けています。
投稿2022/01/28 16:25
総合スコア2857
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。

あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。