html、cssのtableについて

Question

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

Answer 1

先程の回答は border-collapse: collapse の挙動を勘違いしていたので、コメントでご指摘された通りの問題がありました。修正版を提示します。

<div>
<table>
  <thead>
    <tr>
      <th></th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>A</th>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <th>B</th>
      <td>B1</td>
      <td>B2</td>
      <td>B3</td>
    </tr>
    <tr>
      <th>C</th>
      <td>C1</td>
      <td>C2</td>
      <td>C3</td>
    </tr>
  </tbody>
</table>
</div>

div {
  display: inline-block;
  border: 1px solid red;
  background: #ddd;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  margin: 20px;
  background: #fff;
}
th, td {
  box-sizing: content-box;
  padding: 5px 10px;
  text-align: center;
  vertical-align: middle;
}
thead th {
  width: 140px;
  height: 50px;
  background: #ffb157;
}
thead th:first-child {
  width: 120px;
  background: none;
}
tbody th {
  height: 50px;
  background: #617fd1;
}
tbody td {
  background: #fff3e5;
}
/* 3列目以降の左に青線 */
tr *:nth-child(n+3) { 
  border-left: 24px solid blue;
}
/* 2列目の左に赤線 */
tr *:nth-child(2) {
  border-left: 10px solid red;
}
/* tbodyの2列目以降の上に緑線 */
tbody tr:nth-child(n+2) * {
  border-top: 8px solid green;
}
/* tbodyの1列目の上に紫線 */
tbody tr:nth-child(1) * {
  border-top: 8px solid purple;
}

• https://codepen.io/arcxor/pen/gOXpJye

解説

先程の問題点

先程のバージョン https://codepen.io/arcxor/pen/VwrLqOL では border-collapse: collapse を前提に書いてしまっていました。これだとセル間の枠線が結合された状態となり、結果的に「枠線が別レイヤーで上に乗っているような状態」となってしまいます。

先程のコードの border を太くすると https://codepen.io/arcxor/pen/OJOVeLo のようになります。分かりやすいですが、セルの領域が明らかに潰されたようになってしまっています。

border-collapse: collapse は（エクセルのような）1px など均一の太さの枠線をつける際には便利ですが、異なる太さの枠線をつける際には使わない方がよいかもしれません。border-collapse: separate（既定値）を使いましょう。

修正版のコード

• https://codepen.io/arcxor/pen/gOXpJye （枠線の色あり）
• https://codepen.io/arcxor/pen/podJXjz （白枠線）

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 ドキュメントをご覧ください。

• ボックスモデルの概念
  • https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/The_box_model#parts_of_a_box
• box-sizing プロパティ
  • https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing
• border-collapse プロパティ
  • https://developer.mozilla.org/ja/docs/Web/CSS/border-collapse

Answer 2

<div>
<table>
  <thead>
    <tr>
      <th></th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>A</th>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
    </tr>
    <tr>
      <th>B</th>
      <td>B1</td>
      <td>B2</td>
      <td>B3</td>
    </tr>
    <tr>
      <th>C</th>
      <td>C1</td>
      <td>C2</td>
      <td>B3</td>
    </tr>
  </tbody>
</table>
</div>

div {
  display: inline-block;
  border: 1px solid red;
  background: #ddd;
}
table {
  margin: 20px;
  border-collapse: collapse;
  background: #fff;
}
th, td {
  box-sizing: border-box;
  padding: 4px 8px;
  text-align: center;
  vertical-align: middle;
}
thead th {
  width: 160px;
  height: 60px;
  background: #ffb157;
}
thead th:first-child {
  width: 140px;
  background: none;
}
tbody th {
  height: 50px;
  background: #617fd1;
}
tbody td {
  background: #fff3e5;
}
/* 3列目以降の左に青線 */
tr *:nth-child(n+3) { 
  border-left: 16px solid blue;
}
/* 2列目の左に赤線 */
tr *:nth-child(2) {
  border-left: 10px solid red;
}
/* tbodyの2列目以降の上に緑線 */
tbody tr:nth-child(n+2) {
  border-top: 8px solid green;
}
/* tbodyの1列目の上に紫線 */
tbody tr:nth-child(1) {
  border-top: 8px solid purple;
}

• https://codepen.io/arcxor/pen/VwrLqOL

テーブルセル間の余白はセルに対する border で表現します。この例ではセルの上と左に border を付けています。

Comments

[hurora]

ご回答ありがとうございます。
しかも実際のコードまでしっかりかいてくださり、神対応ですね！
無償なのにここまでしていただき感激です。
低劣なマウント取りの回答も多い中ありがとうございます。

まさに求めていた回答でしたので、だいたいわかりましたし、ベストアンサーにさせていただいたのですが、
一つだけきになることがあります。
borderを片側にだけつけていますが、それにより、テキストが左右真ん中からずれてしまうということはないのでしょうか？border-boxによりそれが変わるのかどうかや、border-boxに限らず片側だけのborderにより左右真ん中から崩れることはないのかについてお伺いしたいです。

[arcxor]

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

[arcxor]

失礼しました。最初の回答のコードは border の存在によってセル領域が狭まってしまっています。

新しい回答 https://teratail.com/questions/7j10xwpmsq1dc7#reply-k0owobdv9se1ub をご覧ください。

[hurora]

そうなったんですね、こんな親切にご回答いただきましてありがとうございます。
無償なのに、有料レベルだと思いました。
しっかり拝見させて頂きます。

同じ質問の投稿はご指摘の通りクローズいたしました。