tableでmargin-rightが効きません。なぜ？

Question

tableでmargin-rightが効きません。

tableの両端に10pxの余白をとりたくて margin: 0 10px と指定しましが，左端にしかmarginの余白が入りません。

なぜ，margin-rightが効かないのでしょうか？

該当のソースコード

HTML

<h2>あいうえお</h2>
 <table>
   <tbody>
     <tr>
       <th>2010年4月</th>
       <td>ABC設立</td>
     </tr>
     <tr>
       <th>2012年8月</th>
       <td>株式会社になる</td>
     </tr>
     <tr>
       <th>2015年11月</th>
       <td>○○○支店開設</td>
     </tr>
     <tr>
       <th>2019年2月</th>
       <td>インスタントアプリ○○○と△△の無償提供を開始する</td>
     </tr>
   </tbody>
 </table>

CSS

h2 {
  margin: 0 0 0 10px;
  padding-top: 20px;
  padding-bottom: 12px;
  font-size: 1.375rem;
}

 table {
  width: 100%;
  margin: 0 10px; <!--ここです-->
  padding-left: 0;
  border-collapse: collapse;
  font-size: 0.75rem;
}

th, td {
 margin: 0;
 padding: 20px 10px 20px 0;
 border-top: 1px solid #ddd;
}
tbody {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ddd;
}

Answer 1

なぜ，margin-rightが効かないのでしょうか？

効いてます。
デベロッパーツール等で見てみましょう。

効いてないように見えるのはbodyのコンテンツ部分全てを、table幅100％で設定しているからです。
※table幅100％がダメではありません。CSSをどこにどのように設定するかです。

widthの設定における基準となる「auto」「100%」の違いや、「コンテンツ部分」「margin」と「padding」との違い等や、「CSS　ボックスモデル」等で検索すると、解説サイト等が出てきますので、勉強してみてください。
※方法はいくつかあります。

---

ひとつの例）

 table {
  width: calc(100% - 20px);　/* ← 変更 */
  margin: 0 10px; <!--ここです-->
  padding-left: 0;
  border-collapse: collapse;
  font-size: 0.75rem;
}

---

-追記-
提示CSSのコメント部分の記述形式は誤っていますので、見直してみてください。

Comments

[blackcoffee]

ありかとうございます。
tableの親要素と同じ横幅のボックスサイズになるため，margin-rightは画面の外にはみ出る。だから見かけはmagin-rightが効いていないよう見える。ということですね。

直接は関係ないのですが，tbodyのborder-bottomはChromeとEdgeではきちんと1px認識されていますが，Firefoxではボックスモデルでは0pxとなって認識されないんですが…。私だけですかね。

[yoshinavi]

＞Firefoxではボックスモデルでは0pxとなって認識されないんですが…。

→　確かにパッと見はそう見えますね。「0」をクリックすると「1px」と表示はされますので確認してみてください。

何故このような表示かは「推測」ですが、tbodyとborder-collapseとの特性上の仕様なのかも知れません。

Firefoxの解釈が他のブラウザとは違う部分ですが、比較的にW3Cに忠実かと思いますので、どちらが良い悪いとは言えないですね。

もし、支障があるようなら、tableやtr、th、tdに掛けていくしかないかと思います。

Answer 2

tableがwidth: 100%;だと
margin-rightが効かないのは仕様です。

この場合はtableをdivで囲って
divにmargin: 0 10px;を指定するのが正しいです。

<div class="sample">
  <table>
    <!-- 省略 -->
  </table>
</div>

Comments

[blackcoffee]

端的にご回答いただきありがとうございます。yasutomiさんの方法が簡潔で分かりやすいです。
ベストアンサーにしようか迷いましたが，最初のお答えに敬意を表してyoshinaviさんしました。