表格
控制表格边框是否应合并或分开的工具类。
| Class | Styles |
|---|---|
边框合并 | border-collapse: collapse; |
边框分隔 | 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.