html テーブル 中央寄せ css

HTML 表格居中 CSS 样式指南

この記事では、CSS スタイルを使用して HTML 表をページ内で水平および垂直方向に中央揃えする方法について詳しく説明します。さまざまな一般的なシナリオとソリューションについて説明します。

一、表の水平方向のセンタリング

  • 方法 1: margin プロパティを設定する

    • 表の左右の余白を auto に設定すると、水平方向に中央揃えされます。
    • 適用可能なシナリオ: 表の幅が固定されている。
    • コード例: 
      
<style>
table {
  width: 800px;
  margin: 0 auto;
}
</style>

  • 方法 2: text-align: center を設定する

    • 表の親要素の text-align プロパティを center に設定すると、表はこのプロパティを継承して水平方向に中央揃えされます。
    • 適用可能なシナリオ: 表の幅が固定されておらず、コンテンツに合わせて調整する必要がある。
    • コード例: 
      
<style>
.table-container {
  text-align: center;
}
</style>

二、表の垂直方向のセンタリング

  • 方法 1: display: table-cell および vertical-align: middle を使用する

    • 表の親要素の display プロパティを table-cell に設定し、vertical-align プロパティを middle に設定します。
    • 適用可能なシナリオ: 表の高さが固定されている。
    • コード例: 
      
<style>
.table-container {
  display: table-cell;
  vertical-align: middle;
  height: 100vh; /* 親要素の高さをviewportの高さに設定 */
}
</style>

  • 方法 2: Flexbox レイアウトを使用する

    • 表の親要素を Flex コンテナとして設定し、align-items: center プロパティを設定します。
    • 適用可能なシナリオ: 表の高さが固定されていない。
    • コード例: 
      
<style>
.table-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 親要素の高さをviewportの高さに設定 */
}
</style>

  • 方法 3: Grid レイアウトを使用する

    • 表の親要素を Grid コンテナとして設定し、place-items: center プロパティを使用します。
    • 適用可能なシナリオ: ページ内の表の位置をより柔軟に制御する必要がある。
    • コード例: 
      
<style>
.table-container {
  display: grid;
  place-items: center;
  height: 100vh; /* 親要素の高さをviewportの高さに設定 */
}
</style>

三、表の水平方向と垂直方向のセンタリング

  • 方法 1: 上記の方法を組み合わせる

    • 水平方向のセンタリングと垂直方向のセンタリングの方法を組み合わせて、ページ内で表を完全に中央揃えすることができます。

  • 方法 2: CSS Grid または Flexbox を使用して一度に実行する

    • Grid または Flexbox レイアウトを使用すると、表の水平方向と垂直方向のセンタリングをより簡単に実現できます。

まとめ

この記事では、CSS を使用して HTML 表を中央揃えするさまざまな方法について説明しました。開発者は、実際のニーズに応じて適切なソリューションを選択できます。

関連QA

  1. Q: 表の高さが不明な場合、垂直方向に中央揃えするにはどうすればよいですか？

    A: Flexbox または Grid レイアウトを使用すると、表の高さが不明な場合でも、垂直方向に中央揃えできます。これらのレイアウトは、コンテンツのサイズに合わせて動的に調整できます。

  2. Q: display: table-cell を使用すると、表の高さが親要素を超えて拡張されるのはなぜですか？

    A: display: table-cell を使用すると、表のセルはテーブルのセルのように動作するため、コンテンツに合わせて高さが拡張されます。これを防ぐには、親要素に固定の高さを設定するか、overflow: hidden を使用してオーバーフローするコンテンツを非表示にすることができます。

  3. Q: 複数の方法を組み合わせて使用​​できますか？

    A: はい、特定のレイアウトを実現するために、複数の方法を組み合わせて使用​​できます。たとえば、Flexbox を使用して表を垂直方向に中央揃えし、margin: 0 auto を使用して水平方向に中央揃えすることができます。

その他の参考記事:CSSテーブル