ボーダーコラプス

テーブルの境界線を折りたたむか分離するかを制御するためのユーティリティ

Class reference

Class
Properties
.border-collapseborder-collapse: collapse;
.border-separateborder-collapse: separate;

Collapse

可能な場合は、.border-collapseを使用して、隣接するセルの境界線を1つの境界線に結合します。これには、最上位の<table>タグの境界線の折りたたみが含まれることに注意してください。

State City
Indiana Indianapolis
Ohio Columbus
Michigan Detroit
<table class="border-collapse border-2 border-gray-500">
  <thead>
    <tr>
      <th class="border border-gray-400 px-4 py-2 text-gray-800">State</th>
      <th class="border border-gray-400 px-4 py-2 text-gray-800">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-400 px-4 py-2">Indiana</td>
      <td class="border border-gray-400 px-4 py-2">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-gray-400 px-4 py-2">Ohio</td>
      <td class="border border-gray-400 px-4 py-2">Columbus</td>
    </tr>
    <tr>
      <td class="border border-gray-400 px-4 py-2">Michigan</td>
      <td class="border border-gray-400 px-4 py-2">Detroit</td>
    </tr>
  </tbody>
</table>

Separate

.border-separateを使用して、各セルに独自の個別の境界線を表示させます。

State City
Indiana Indianapolis
Ohio Columbus
Michigan Detroit
<table class="border-separate border-2 border-gray-500">
  <thead>
    <tr>
      <th class="border border-gray-400 px-4 py-2 text-gray-800">State</th>
      <th class="border border-gray-400 px-4 py-2 text-gray-800">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-400 px-4 py-2">Indiana</td>
      <td class="border border-gray-400 px-4 py-2">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-gray-400 px-4 py-2">Ohio</td>
      <td class="border border-gray-400 px-4 py-2">Columbus</td>
    </tr>
    <tr>
      <td class="border border-gray-400 px-4 py-2">Michigan</td>
      <td class="border border-gray-400 px-4 py-2">Detroit</td>
    </tr>
  </tbody>
</table>

カスタマイズ

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

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

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

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

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

機能を使用しない場合

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

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

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

Tailwind UI is now in early access!