表格
用于控制表格边框是合并还是分隔的工具类。
类 | 样式 |
---|---|
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>
了解更多关于在变体文档中使用变体的信息。