HTML & CSS - セルのサイズを均等にする

セルのサイズを均等にする

セルのサイズを均等にするには、table 要素に適用される CSS の table-layout: fixed; で定義します。table-layout: fixed; を定義する場合は、table の幅を指定する必要があるため、以下のような CSS になります。

<table>
  <caption> 表のタイトル </caption>
  
  <thead>
    <tr>
      <th> 見出しセル </th>
      <th> 見出しセル </th>
      <th> 見出しセル </th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td> データセル </td>
      <td> データセル </td>
      <td> データセル </td>
    </tr>
  </tbody>
  
</table>
セルのサイズを均等にする - HTML
table{
    width: 100%;
    table-layout: fixed;
}
セルのサイズを均等にする - CSS

関連記事

Category:
プログラミング
公開日:
更新日:
Pageviews:
4
Shares:
0
Tag:
HTML
CSS
サンプルコード