3

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>

1 件の回答 1

3

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>

2
  • border-spacingを0にしていない状態で一部だけ隙間を埋める方法はあるのでしょうか。
    – user25636
    2019年9月3日 6:16
  • その border-spacing プロパティは tr 要素にネガティブマージンを設定することで置き換えることが出来ます。
    – supa
    2019年9月3日 9:23

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。