border-spacingをtableの一部の範囲に適用しない

Question

table.ex2
{
border-collapse:separate;
border-spacing:10px 50px;
}

<table class="ex2" border="1">
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
<tr>
<td>Glenn</td>
<td>Quagmire</td>
</tr>
</table>

上記のHTMLで、以下の範囲だけborder-spacingを適用せずに隙間をなくすにはどのようにすればいいのでしょうか？

<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>

Answer 1

border-spacing プロパティは、テーブル単位でセルの枠線同士の間隔を設定します。そのため、特定のセルでのみ間隔を変更することは border-spacing プロパティでは不可能です。

方法は幾つかありますが、 CSS Grid Layout を使用して以下のように行うことが出来ます。行間の余白の扱いが不明なので、当該行の上と左右の余白を除去する場合の例を示します。

table,
td {
  border: 1px solid;
}
table {
  border-spacing: 0;
}
tr {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 50px 10px;
  gap: 10px;
}
tr:first-of-type {
  margin: 0;
  gap: 0;
}

<table class="ex2" border="1">
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
  </tr>
  <tr>
    <td>Glenn</td>
    <td>Quagmire</td>
  </tr>
</table>