Tailwind CSS - 表格边框合并

Tailwind CSS 表格边框合并是一个实用程序类，用于控制表格边框是合并还是分开。

Tailwind CSS 表格边框合并类

以下是Tailwind CSS 表格边框合并类列表，它提供了一种有效处理表格边框的方法。

类名	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>

打印页面