表格
用于控制表格边框是合并还是分开的实用工具。
| 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.