表格
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>请参阅 变体文档 详细了解如何使用变体。