【Tailwind和訳】TABLES/Border Collapse

この記事について

この記事は、TABLES/Border Collapseの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Border Collapse

テーブルのボーダーが折りたたまれるか、分離されるかを制御するユーティリティ。

クラス	プロパティ
border-collapse	border-collapse: collapse;
border-separate	border-collapse: separate;

セパレート

border-separateを使用すると、各セルに個別のボーダーを表示させることができます。

<table class="border-separate border border-green-800 ...">
  <thead>
    <tr>
      <th class="border border-green-600 ...">State</th>
      <th class="border border-green-600 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-green-600 ...">Indiana</td>
      <td class="border border-green-600 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Ohio</td>
      <td class="border border-green-600 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Michigan</td>
      <td class="border border-green-600 ...">Detroit</td>
    </tr>
  </tbody>
</table>

折りたたみ

border-collapse を使用すると、可能な限り隣接するセルの境界線を 1 つの境界線にまとめることができます。これには、トップレベルの<table>タグのボーダーを折りたたむことも含まれることに注意してください。

<table class="border-collapse border border-green-800 ...">
  <thead>
    <tr>
      <th class="border border-green-600 ...">State</th>
      <th class="border border-green-600 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-green-600 ...">Indiana</td>
      <td class="border border-green-600 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Ohio</td>
      <td class="border border-green-600 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Michigan</td>
      <td class="border border-green-600 ...">Detroit</td>
    </tr>
  </tbody>
</table>

カスタマイズ

バリアント

デフォルトでは、ボーダーコラプスユーティリティーにはレスポンシブバリアントのみが生成されます。

tailwind.config.js ファイルの variants セクションにある borderCollapse プロパティを変更することで、ボーダーを折りたたむユーティリティー用に生成されるバリアントをコントロールすることができます。

例えば、この設定ではホバーとフォーカスのバリアントも生成されます。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       borderCollapse: ['hover', 'focus'],
      }
    }
  }

無効化

borderCollapse ユーティリティーをプロジェクトで使用する予定がない場合は、設定ファイルの corePlugins セクションで borderCollapse プロパティを false に設定することで、完全に無効化することができます。

tailwind.config.js

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