CSSを使用したテーブル列幅の設定方法

1. 固定列幅の設定: テーブルの列幅を固定するには、CSSの「width」プロパティを使用します。各列のセルに対して、適切な幅の値を指定します。以下は例です:

table {
  width: 100%;
}
td {
  width: 100px; /* 列幅を100ピクセルに設定 */
}

2. テーブルの自動調整: テーブルの列幅をコンテンツに基づいて自動的に調整する場合は、「table-layout」プロパティを使用します。以下は例です:

table {
  width: 100%;
  table-layout: auto;
}

3. レスポンシブデザインへの対応: テーブルの列幅をレスポンシブにするには、メディアクエリを使用して異なる画面サイズに対応するスタイルを設定します。以下は例です:

table {
  width: 100%;
}
td {
  width: 100%; /* デフォルトの列幅 */
}
@media (min-width: 768px) {
  td {
    width: 50%; /* 768ピクセル以上の画面サイズで列幅を50%に設定 */
  }
}
@media (min-width: 1024px) {
  td {
    width: 25%; /* 1024ピクセル以上の画面サイズで列幅を25%に設定 */
  }
}

これらの方法を使用することで、テーブルの列幅を適切に設定することができます。必要に応じて、さまざまな方法を組み合わせることもできます。