CSSテーブルの列間隔の設定方法

1. CSSのborder-spacingプロパティを使用する方法: テーブル要素に対して次のようなCSSを適用します。

   table {
    border-collapse: separate;
    border-spacing: 10px; /* 列間隔の値を設定 */
   }

   上記の例では、列間隔を10pxに設定しています。この値を適宜調整してください。

2. CSSのpaddingプロパティを使用する方法: テーブルのセルに対して次のようなCSSを適用します。

   td {
    padding: 0 10px; /* 左右のパディングを設定 */
   }

   上記の例では、セルの左右に10pxのパディングを設定しています。これにより、セル間のスペースが確保されます。

3. CSSのグリッドレイアウトを使用する方法: CSSのグリッドレイアウトを使用して、テーブルのレイアウトを作成することもできます。以下は例です。

   .table-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 列の数と幅を指定 */
    gap: 10px; /* 列間隔の値を設定 */
   }

   上記の例では、3つの等幅の列を持つテーブルを作成しています。列間隔は10pxです。

これらの方法を組み合わせて使用することもできます。例えば、border-spacingプロパティとpaddingプロパティを組み合わせて使用することで、より詳細な制御が可能です。

以上が、CSSを使用してテーブルの列間隔を設定する方法とコード例です。適用したい方法に応じて、適切なコードを選択してください。