teratail header banner
teratail header banner
質問するログイン新規登録
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

472閲覧

html、cssのtableについて

hurora

総合スコア14

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2022/01/28 14:11

0

0

下記のXDnoスクリーンショットの表をHTMLのtableで作成しているのですが、マス目のの余白が全て同じではなく、そこが再現できなくて困っています。
こういったものはtableタグでは再現が難しいのでしょうか?
マスのtd,th,trにmarginが設定できないのと、全て均等な余白を作るborder-spacingだと作れませんので、どうやってコーディングしたらよいのか教えて頂きたいです。
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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(既定値)を指定しています。

補足

セルに長い文字列などが入った場合、このCSSだと内容に応じてセルの幅が拡張されてしまいます。これを防ぐためにはセル(th, td)に対して word-break: break-all を指定します。

セルの幅を決め打ちするのではなく、テーブル全体の幅を決める方法も考えられます。その場合は th, td への width 指定をせずに(一部のセルに width を指定してもよい)、table に対して widthtable-layout: fixed を指定します。

参考

CSSプロパティ等の詳細は MDN ドキュメントをご覧ください。

投稿2022/01/28 20:08

編集2022/01/28 20:14
arcxor

総合スコア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

arcxor

総合スコア2857

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hurora

2022/01/28 17:29

ご回答ありがとうございます。 しかも実際のコードまでしっかりかいてくださり、神対応ですね! 無償なのにここまでしていただき感激です。 低劣なマウント取りの回答も多い中ありがとうございます。 まさに求めていた回答でしたので、だいたいわかりましたし、ベストアンサーにさせていただいたのですが、 一つだけきになることがあります。 borderを片側にだけつけていますが、それにより、テキストが左右真ん中からずれてしまうということはないのでしょうか?border-boxによりそれが変わるのかどうかや、border-boxに限らず片側だけのborderにより左右真ん中から崩れることはないのかについてお伺いしたいです。
arcxor

2022/01/28 19:21 編集

あ、ごめんなさい。border-collapse: collapse の挙動を勘違いしていて、結果として懸念されている通り、ずれてしまいますね(回答するので少々お待ち下さい)
hurora

2022/01/29 10:03

そうなったんですね、こんな親切にご回答いただきましてありがとうございます。 無償なのに、有料レベルだと思いました。 しっかり拝見させて頂きます。 同じ質問の投稿はご指摘の通りクローズいたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問