Tailwind CSS - Border Collapse
Tailwind CSS Border Collapse 是一个实用类，用于控制表格边框是折叠还是分离。
Tailwind CSS Border Collapse 类
以下是 Tailwind CSS Border Collapse 类的列表，它们提供了一种有效的表格边框处理方法。
| 类 | CSS 属性 |
|---|---|
| border-collapse | border-collapse: collapse; |
| border-separate | border-collapse: separate; |
Tailwind CSS 边框折叠类的功能
- border-collapse:此类指定边框折叠成单个边框。两个相邻的单元格将共享一个边框。
- border-separate:此类指定边框分离。每个单元格都有自己的边框，并且这些边框不会与表格中的其他单元格共享。
Tailwind CSS 边框折叠类示例
以下示例将说明 Tailwind CSS 边框折叠类的实用功能。
表格边框折叠
通过使用`border-collapse`类，我们可以创建一个表格，其中两个相邻的单元格将共享一个边框。
示例
<!DOCTYPE html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h1 class="text-3xl mb-3">
Tailwind CSS Border Collapse
</h1>
<table class="border-collapse w-full
border border-slate-500">
<thead>
<tr>
<th class="bg-green-600 border
border-slate-600 w-1/3">
Acronym
</th>
<th class="bg-green-600 border
border-slate-600 w-2/3">
Stand For
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-green-300 border
border-slate-700">
HTML
</td>
<td class="bg-green-300 border
border-slate-700">
HyperText markup Language
</td>
</tr>
<tr>
<td class="bg-green-300 border
border-slate-700">
CSS
</td>
<td class="bg-green-300 border
border-slate-700">
Cascading Style Sheets
</td>
</tr>
</tbody>
</table>
</body>
</html>
表格边框分离
通过使用 `border-separate` 类，我们可以创建一个表格，其中每个单元格都有自己的边框，并且这些边框不会与表格中的其他单元格共享。
示例
<!DOCTYPE html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h1 class="text-3xl mb-3">
Tailwind CSS Border Collapse
</h1>
<table class="border-separate w-full
border border-slate-500">
<thead>
<tr>
<th class="bg-green-600 border
border-slate-600 w-1/3">
Acronym
</th>
<th class="bg-green-600 border
border-slate-600 w-2/3">
Stand For
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-green-300 border
border-slate-700">
HTML
</td>
<td class="bg-green-300 border
border-slate-700">
HyperText markup Language
</td>
</tr>
<tr>
<td class="bg-green-300 border
border-slate-700">
CSS
</td>
<td class="bg-green-300 border
border-slate-700">
Cascading Style Sheets
</td>
</tr>
</tbody>
</table>
</body>
</html>
