表格
用于控制表格边框是折叠还是分离的工具类。
| Class | Styles |
|---|---|
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 ...">省份</th> <th class="border border-gray-300 ...">城市</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 ...">湖北</td> <td class="border border-gray-300 ...">武汉</td> </tr> <tr> <td class="border border-gray-300 ...">广东</td> <td class="border border-gray-300 ...">广州</td> </tr> <tr> <td class="border border-gray-300 ...">江苏</td> <td class="border border-gray-300 ...">南京</td> </tr> </tbody></table>注意这包括在顶级 <table> 标签上折叠边框。
使用 border-separate 工具类强制每个单元格显示自己的独立边框：
| 省份 | 城市 |
|---|---|
| 湖北 | 武汉 |
| 广东 | 广州 |
| 江苏 | 南京 |
<table class="border-separate border border-gray-400 ..."> <thead> <tr> <th class="border border-gray-300 ...">省份</th> <th class="border border-gray-300 ...">城市</th> </tr> </thead> <tbody> <tr> <td class="border border-gray-300 ...">湖北</td> <td class="border border-gray-300 ...">武汉</td> </tr> <tr> <td class="border border-gray-300 ...">广东</td> <td class="border border-gray-300 ...">广州</td> </tr> <tr> <td class="border border-gray-300 ...">江苏</td> <td class="border border-gray-300 ...">南京</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.