Tables
border-collapse
用于控制表格边框是否应该合并或分开的功能类。
| Class | Styles |
|---|---|
border-collapse | border-collapse: collapse; |
border-separate | border-collapse: separate; |
示例
合并表格边框
使用 border-collapse 功能类在可能的情况下将相邻单元格边框合并为单个边框：
| 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> 标签上合并边框。
分离表格边框
使用 border-separate 功能类给每个单元格独立的边框：
| 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>响应式设计
Prefix a border-collapse utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<table class="border-collapse md:border-separate ..."> <!-- ... --></table>Learn more about using variants in the variants documentation.
