Border Collapse 边框折叠
控制表格边框是否应该合并或分开的实用工具。
| Class | Properties |
|---|
基本用法
Collapse 折叠
使用 border-collapse 在可能的情况下将相邻单元格的边框合并为单个边框。请注意，这包括在顶层 <table> 标记上折叠边框。
| State | City |
|---|---|
| Indiana | Indianapolis |
| Ohio | Columbus |
| Michigan | Detroit |
html
<table class="border-collapse border border-slate-400 ...">
<thead>
<tr>
<th class="border border-slate-300 ...">State</th>
<th class="border border-slate-300 ...">City</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-slate-300 ...">Indiana</td>
<td class="border border-slate-300 ...">Indianapolis</td>
</tr>
<tr>
<td class="border border-slate-300 ...">Ohio</td>
<td class="border border-slate-300 ...">Columbus</td>
</tr>
<tr>
<td class="border border-slate-300 ...">Michigan</td>
<td class="border border-slate-300 ...">Detroit</td>
</tr>
</tbody>
</table>Separate 分开
使用 border-separate 来强制每个单元格显示自己独立的边框。
| State | City |
|---|---|
| Indiana | Indianapolis |
| Ohio | Columbus |
| Michigan | Detroit |
html
<table class="border-separate border border-slate-400 ...">
<thead>
<tr>
<th class="border border-slate-300 ...">State</th>
<th class="border border-slate-300 ...">City</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-slate-300 ...">Indiana</td>
<td class="border border-slate-300 ...">Indianapolis</td>
</tr>
<tr>
<td class="border border-slate-300 ...">Ohio</td>
<td class="border border-slate-300 ...">Columbus</td>
</tr>
<tr>
<td class="border border-slate-300 ...">Michigan</td>
<td class="border border-slate-300 ...">Detroit</td>
</tr>
</tbody>
</table>有条件地应用
悬停、焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:border-collapse 只在悬停时应用 border-collapse 实用程序。
html
<table class="hover:border-collapse">
<!-- ... -->
</table>要查看所有可用状态修饰符的完整列表，请查阅悬停、焦点和其他状态文档。
断点和媒体查询
您还可以使用变体修饰符来定位媒体查询，比如响应式断点、暗模式、偏好减少动作等。例如，使用 md:border-collapse 仅在中等屏幕尺寸及以上应用 border-collapse 实用程序。
html
<table class="md:border-collapse">
<!-- ... -->
</table>