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>

列印頁面