表格
用于控制表格边框是合并还是分离的工具类。
| Class | Styles |
|---|---|
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 ...">州</th> <th class="border border-gray-300 ...">城市</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 ...">印第安纳州</td> <td class="border border-gray-300 ...">印第安纳波利斯</td> </tr> <tr> <td class="border border-gray-300 ...">俄亥俄州</td> <td class="border border-gray-300 ...">哥伦布市</td> </tr> <tr> <td class="border border-gray-300 ...">密歇根州</td> <td class="border border-gray-300 ...">底特律</td> </tr> </tbody></table>请注意，这包括对顶级 <table> 标签的边框折叠。
使用 border-separate 工具类强制每个单元格显示独立的边框：
| 州 | 城市 |
|---|---|
| 印第安纳州 | 印第安纳波利斯 |
| 俄亥俄州 | 哥伦布市 |
| 密歇根州 | 底特律 |
<table class="border-separate border border-gray-400 ..."> <thead> <tr> <th class="border border-gray-300 ...">州</th> <th class="border border-gray-300 ...">城市</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 ...">印第安纳州</td> <td class="border border-gray-300 ...">印第安纳波利斯</td> </tr> <tr> <td class="border border-gray-300 ...">俄亥俄州</td> <td class="border border-gray-300 ...">哥伦布市</td> </tr> <tr> <td class="border border-gray-300 ...">密歇根州</td> <td class="border border-gray-300 ...">底特律</td> </tr> </tbody></table>Prefix a border-collapse utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<table class="border-collapse md:border-separate ..."> <!-- ... --></table>Learn more about using variants in the variants documentation.