表格
用于控制表格边框应折叠还是分隔的实用工具。
| 类名 | 样式 |
|---|---|
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:，仅在以下情况下应用该实用工具中等 屏幕尺寸及以上
<table class="border-collapse md:border-separate ..."> <!-- ... --></table>了解更多关于在变体文档中使用变体的信息。