1. 表格
  2. border-collapse

表格

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:

StateCity
IndianaIndianapolis
OhioColumbus
MichiganDetroit
<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:

StateCity
IndianaIndianapolis
OhioColumbus
MichiganDetroit
<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>

请参阅 变体文档 详细了解如何使用变体。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号