0

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

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

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

以下、例です。

css

<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>

html

<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>

実行結果

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

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

1 件の回答 1

3

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

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

 <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>

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

.table1 {
  border: 30px solid green;
  width: 100px;
  height: 100px;
}

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

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

.td {
  width: 70px;
  height: 70px;
}

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

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

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

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

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