表格
border-collapse
用于控制表格边框是否折叠或分离的工具。
类 | 样式 |
---|---|
border-collapse | border-collapse: collapse; |
border-separate | border-collapse: separate; |
示例(Examples)
¥Examples
折叠表格边框(Collapsing table borders)
¥Collapsing table borders
使用 border-collapse
工具在可能的情况下将相邻的单元格边框合并为单个边框:
¥Use the border-collapse
utility to combine adjacent cell borders into a single border when possible:
State | City |
---|---|
Indiana | Indianapolis |
Ohio | Columbus |
Michigan | Detroit |
<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>
标记上的折叠边框。
¥Note that this includes collapsing borders on the top-level <table>
tag.
分隔表格边框(Separating table borders)
¥Separating table borders
使用 border-separate
工具强制每个单元格显示自己的单独边界:
¥Use the border-separate
utility to force each cell to display its own separate borders:
State | City |
---|---|
Indiana | Indianapolis |
Ohio | Columbus |
Michigan | Detroit |
<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>
响应式设计(Responsive design)
¥Responsive design
在 border-collapse
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<table class="border-collapse md:border-separate ..."> <!-- ... --></table>
请参阅 变体文档 详细了解如何使用变体。