HTML & CSS - セルのサイズを固定する

セルのサイズを固定する

セルのサイズを固定するには、th / td 要素に適用される CSS の width プロパティで定義します。また、特定の列の幅を固定する場合、CSS セレクタとして :nth-child(n) を使用する方法があります。例えば、３列目を指定したい場合は :nth-child(3) のように記述します。

<table>
  <caption> 表のタイトル </caption>
  
  <thead>
    <tr>
      <th> 見出しセル </th>
      <th> 見出しセル </th>
      <th> 見出しセル </th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td> データセル </td>
      <td> データセル </td>
      <td> データセル </td>
    </tr>
  </tbody>
  
</table>

th:nth-child(2){
    width: 300px;
}