Table

Tailwind CSSではtableタグに指定できるテーブルレイアウトクラスを用意しています。

Tailwind CSSのテーブルレイアウトクラス
クラス CSSプロパティ 説明
table-auto table-layout: auto; 幅を自動的に変更するテーブル
table-fixed table-layout: fixed; 固定幅のテーブル

Border

Tailwind CSSでテーブルにborder(境界線)を引くには、どこにどのような線を引くのかを具体的にクラスで指定する必要があります。

<table>
  <caption>Classes for table layout</caption>
  <thead>
    <!-- border-bottom-width: 2px -->
    <tr class="border-b-2">
      <th class="px-4 py-2">Class</th>
      <th class="px-4 py-2">CSS property</th>
    </tr>
  </thead>
  <tbody>
    <!-- border-bottom-width: 1px -->
    <tr class="border-b">
      <td class="px-4 py-2">table-auto</td>
      <td class="px-4 py-2">table-layout: auto;</td>
    </tr>
    <tr>
      <td class="px-4 py-2">table-fixed</td>
      <td class="px-4 py-2">table-layout: fixed;</td>
    </tr>
  </tbody>
</table>
Classes for table layout
Class CSS property
table-auto table-layout: auto;
table-fixed table-layout: fixed;

Padding

Tailwind CSSでテーブルのセル等にパディング(余白)を入れるには、どこにどのくらいのパディングを入れるのかを具体的に指定する必要があります。

デフォルトのパディングは0で見づらいので、必ず指定することになります。

<td class="px-4 py-2">table-auto</td>