CSSを使用してテーブルを水平方向に中央揃えする方法

方法1: marginを使用する方法 この方法では、テーブルに左右のマージンを自動的に追加して、テーブルを中央に配置します。

table {
  margin-left: auto;
  margin-right: auto;
}

方法2: flexboxを使用する方法 この方法では、親要素にdisplay: flexを設定し、justify-content: centerを使用してテーブルを中央に配置します。

.container {
  display: flex;
  justify-content: center;
}
.container table {
  /* 追加のスタイルが必要な場合はここに記述します */
}

HTMLの例:

<div class="container">
  <table>
    <!-- テーブルのコンテンツをここに追加します -->
  </table>
</div>

方法3: gridを使用する方法 この方法では、親要素にdisplay: gridを設定し、justify-items: centerを使用してテーブルを中央に配置します。

.container {
  display: grid;
  justify-items: center;
}
.container table {
  /* 追加のスタイルが必要な場合はここに記述します */
}

HTMLの例:

<div class="container">
  <table>
    <!-- テーブルのコンテンツをここに追加します -->
  </table>
</div>

これらの方法を使用すると、テーブルを水平方向に中央に配置することができます。適用する方法は、特定の要件や他のスタイルとの互換性によって異なる場合があります。必要に応じて、追加のスタイルを適用して、デザインに合わせて調整してください。