
[code]

    table.ex2
    {
    border-collapse:separate;
    border-spacing:10px 50px;
    }
[/code]

[code]

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

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

[code]

    <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    </tr>
    
[/code]


CC BY-SA 4.0
2019-09-02T06:14:25.563
57763
2019-09-03T07:45:20.477
2019-09-03T07:45:20.477
754
25636
question
css
border-spacingをtableの一部の範囲に適用しない


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

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

[code]

    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;
    }
[/code]

[code]

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


CC BY-SA 4.0
2019-09-02T18:55:42.043
57778
2019-09-02T18:55:42.043
32986
57763
answer