笙亿网络策划

Tailwind CSS border-collapse 属性怎么用？表格边框合并技巧

约 6 分钟读完 28 阅
文章导读
Previous Quiz Next Tailwind CSS Border Collapse 是一个 utility class，用于控制表格边框是应该折叠还是分离。
📋 目录
  1. 一 Tailwind CSS Border Collapse Classes
  2. 二 Tailwind CSS Border Collapse Classes 的功能
  3. 三 Tailwind CSS Border Collapse Class 示例
  4. 四 表格边框折叠
  5. 五 表格边框分离
A A

Tailwind CSS - 边框折叠

Previous
Quiz
Next

Tailwind CSS Border Collapse 是一个 utility class，用于控制表格边框是应该折叠还是分离。

Tailwind CSS Border Collapse Classes

以下是 Tailwind CSS Border Collapse Classes 列表，这些类提供了有效处理表格边框的方法。

Class CSS Properties
border-collapse border-collapse: collapse;
border-separate border-collapse: separate;

Tailwind CSS Border Collapse Classes 的功能

  • border-collapse: 该类指定边框折叠为单一边框。相邻的两个单元格将共享一条边框。
  • border-separate: 该类指定边框分离。每个单元格都有自己的边框，这些边框不与其他表格单元格共享。

Tailwind CSS Border Collapse Class 示例

以下示例将演示 Tailwind CSS Border Collapse class 的用法。

表格边框折叠

通过使用 `border-collapse` class，我们可以创建一个相邻单元格共享边框的表格。

示例

<!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` class，我们可以创建一个表格，其中每个单元格都有自己的边框，这些边框不会与其他单元格共享。

示例

<!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>