CSSでテーブルの列幅を指定する方法

こんにちは！

今回はCSSでテーブルの列幅を指定する方法をまとめます。

やりたいこと

• テーブルの列ごとに幅を固定したい

方法

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

th:nth-child(1) {
  width: 30%;
}

th:nth-child(2) {
  width: 70%;
}

• tableにtable-layout: fixedとwidth: 100%を指定
• 列幅を調整したいthに対してwidthを指定
  • 列を指定する方法としてはnth-childやクラス名などがある

おわりに

今回はCSSでテーブルの列幅を指定する方法をまとめました。RailsでWebアプリを制作していると、CSSを書く必要があるのでCSSについても詳しくなりますね！

54/100