45330


table、tr、tdタグに box-sizing: border-box を適用した場合の仕様について教えてください。

  * `<table>` タグに `box-sizing: border-box` を指定しても効果はない
  * `<tr>`タグ、`<td>`タグに `box-sizing: border-box` を指定すると `<tr>`要素、`<td>`要素のサイズは指定した大きさになるが、罫線は `border-width` の半分だけ外にはみ出る（table のサイズが大きくなる）

上記のような動作になるのですが、これは仕様なのでしょうか？

以下、例です。

css

[code]

    <style>
      div {
        display: inline-block;
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        border: 30px solid red;
      }
      table {
        display: inline-block;
        box-sizing: border-box;
        border-collapse: collapse;
      }
      tr {
        box-sizing: border-box;
        height: 100px;
      }
      td {
        box-sizing: border-box;
        width: 100px;
      }
      .table1 {
        border: 30px solid green;
      }
      .table2 tr {
        border: 30px solid blue;
      }
      .table3 td {
        border: 30px solid orange;
      }
    </style>
    
[/code]

html

[code]

    <html>
    <body>
      <div></div>
      <table class="table1">
        <tr><td></td></tr>
      </table>
      <table class="table2">
        <tr><td></td></tr>
      </table>
      <table class="table3">
        <tr><td></td></tr>
      </table>
    </body>
    </html>
    
[/code]

[![実行結果](https://i.stack.imgur.com/4vpE5.png)](https://i.stack.imgur.com/4vpE5.png)

  1. div の大きさ(borderを含んだ全体の大きさ)は 100px
  2. table1 の大きさは 160px
  3. table2 の大きさは 130px
  4. table3 の大きさは 130px

となります。  
table に対して div と同じような結果を得る方法はあるでしょうか？


CC BY-SA 4.0
2018-07-04T14:42:35.777
45313
2018-07-05T10:40:37.753
3925
question
html css html5
table、tr、tdタグの box-sizing: border-box について


> `<table>`タグに box-sizing: border-box を指定しても効果はない

`box-sizing`プロパティは承継しないので、すべての要素に設定する必要があります。`border-box`と`content-
box`を混ぜて使うことは少ないので通常は、universal selector * を使って記述する場合が多く、今回の場合であれば以下のように書けます。

[code]

     <style>
      * {
        box-sizing: border-box;
      }
      div {
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 30px solid red;
      }
      table {
        display: inline-block;
        border-collapse: collapse;
      }
      tr {
        height: 100px;
      }
      td {
        width: 100px;
      }
      .table1 {
        border: 30px solid green;
      }
      .table2 tr {
        border: 30px solid blue;
      }
      .table3 td {
        border: 30px solid orange;
      }
    </style>
    
[/code]

`div`と`table`で大きさが違っているのは、`div`がその要素に対してサイズを設定しているのに対して`table`は子要素に対して同じサイズを設定しているので、罫線の幅だけ大きくなります。同じ大きさにしようと思うのであれば、`table1`については、`div`の場合と同じようにこの要素にサイズを設定するようにします。

[code]

    .table1 {
      border: 30px solid green;
      width: 100px;
      height: 100px;
    }
    
[/code]

`table3`は`border-collapse: collapse`を削除すれば、`div`の場合と同じ大きさになります。

`border-collapse:
collapse`の設定を残す必要があれば、`table2`と`table3`では計算して次のように設定するしかないでしょう。

[code]

    .td {
      width: 70px;
      height: 70px;
    }
    
[/code]

なお、CSS3では、レイアウト用には`Flexbox`が用意されています。レイアウトに使うのであれば`div`や`table`よりも`Flexbox`を使いましょう。

> `<tr>`タグ、`<td>`タグに box-sizing: border-box を指定すると
> `<tr>`要素、`<td>`要素のサイズは指定した大きさになるが、罫線は border-width の半分だけ外にはみ出る（table
> のサイズが大きくなる）

罫線が`border-width`の半分だけ外にはみ出るのは、`box-sizing: border-box`の仕様ではなくて、`border-
collapse: collapse`の仕様です。`border-collapse:
collapse`に設定すると罫線を上下左右のセルで共有するようになるので、罫線の太さを同じにするため一番外側だけは半分だけ外にはみ出るようになります。


CC BY-SA 4.0
2018-07-05T10:28:00.007
45330
2018-07-05T10:40:37.753
2018-07-05T10:40:37.753
15171
15171
45313
answer