テーブルレイアウト

テーブルレイアウトアルゴリズムを制御するためのユーティリティ。

Class reference

Class
Properties
.table-autotable-layout: auto;
.table-fixedtable-layout: fixed;

Auto

.table-autoを使用して、テーブルがセルの内容に合うように列のサイズを自動的に設定できるようにします。

Title Author Views
Intro to CSS Adam 858
A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design Adam 112
Intro to JavaScript Chris 1,280
<table class="table-auto">
  <thead>
    <tr>
      <th class="px-4 py-2">Title</th>
      <th class="px-4 py-2">Author</th>
      <th class="px-4 py-2">Views</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">Intro to CSS</td>
      <td class="border px-4 py-2">Adam</td>
      <td class="border px-4 py-2">858</td>
    </tr>
    <tr class="bg-gray-100">
      <td class="border px-4 py-2">A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>
      <td class="border px-4 py-2">Adam</td>
      <td class="border px-4 py-2">112</td>
    </tr>
    <tr>
      <td class="border px-4 py-2">Intro to JavaScript</td>
      <td class="border px-4 py-2">Chris</td>
      <td class="border px-4 py-2">1,280</td>
    </tr>
  </tbody>
</table>

Fixed

.table-fixedを使用して、テーブルがコンテンツを無視し、列に固定幅を使用できるようにします。最初の行の幅は、テーブル全体の列幅を設定します。

一部の列の幅は手動で設定でき、使用可能な残りの幅は、明示的な幅なしで列間で均等に分割されます。

Title Author Views
Intro to CSS Adam 858
A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design Adam 112
Intro to JavaScript Chris 1,280
<table class="table-fixed">
  <thead>
    <tr>
      <th class="w-1/2 px-4 py-2">Title</th>
      <th class="w-1/4 px-4 py-2">Author</th>
      <th class="w-1/4 px-4 py-2">Views</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">Intro to CSS</td>
      <td class="border px-4 py-2">Adam</td>
      <td class="border px-4 py-2">858</td>
    </tr>
    <tr class="bg-gray-100">
      <td class="border px-4 py-2">A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>
      <td class="border px-4 py-2">Adam</td>
      <td class="border px-4 py-2">112</td>
    </tr>
    <tr>
      <td class="border px-4 py-2">Intro to JavaScript</td>
      <td class="border px-4 py-2">Chris</td>
      <td class="border px-4 py-2">1,280</td>
    </tr>
  </tbody>
</table>

Customizing

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはtable layout utilitiesのために作られます。

あなたはどのバリアントがtable layout utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのtableLayoutプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     tableLayout: ['responsive'],
+     tableLayout: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしtable layout utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのtableLayout propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     tableLayout: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!