表格
border-collapse
用于控制表格边框是合并还是分开的工具。
| 类 | 样式 |
|---|---|
border-collapse | border-collapse: collapse; |
border-separate | border-collapse: separate; |
示例(Examples)
折叠表格边框(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)
使用 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)
在 border-collapse 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<table class="border-collapse md:border-separate ..."> <!-- ... --></table>请参阅 变体文档 详细了解如何使用变体。