Tables
テーブルのボーダーを collapse（重ねる）または separate（分離する）を制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
border-collapse | border-collapse: collapse; |
border-separate | border-collapse: separate; |
隣接するセルのボーダーを可能な場合は単一のボーダーに結合するには、border-collapse ユーティリティを使用します。
| 州 | 都市 |
|---|---|
| インディアナ州 | インディアナポリス |
| オハイオ州 | コロンバス |
| ミシガン州 | デトロイト |
<table class="border-collapse border border-gray-400 ..."> <thead> <tr> <th class="border border-gray-300 ...">State</th> <th class="border border-gray-300 ...">City</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 ...">Indiana</td> <td class="border border-gray-300 ...">Indianapolis</td> </tr> <tr> <td class="border border-gray-300 ...">Ohio</td> <td class="border border-gray-300 ...">Columbus</td> </tr> <tr> <td class="border border-gray-300 ...">Michigan</td> <td class="border border-gray-300 ...">Detroit</td> </tr> </tbody></table>これは、トップレベルの <table> タグのボーダーを重ねることも含むことに注意してください。
各セルに独自の独立したボーダーを表示させるには、border-separate ユーティリティを使用します。
| 州 | 都市 |
|---|---|
| インディアナ州 | インディアナポリス |
| オハイオ州 | コロンバス |
| ミシガン州 | デトロイト |
<table class="border-separate border border-gray-400 ..."> <thead> <tr> <th class="border border-gray-300 ...">State</th> <th class="border border-gray-300 ...">City</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 ...">Indiana</td> <td class="border border-gray-300 ...">Indianapolis</td> </tr> <tr> <td class="border border-gray-300 ...">Ohio</td> <td class="border border-gray-300 ...">Columbus</td> </tr> <tr> <td class="border border-gray-300 ...">Michigan</td> <td class="border border-gray-300 ...">Detroit</td> </tr> </tbody></table>プレフィックスa border-collapse ユーティリティ md: のようなブレークポイントバリアントとともに使用して、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみです。
<table class="border-collapse md:border-separate ..."> <!-- ... --></table>バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。