Tailwind CSS - 表格佈局

Tailwind CSS 表格佈局是一個用於控制表格佈局演算法的實用程式類。

Tailwind CSS 表格佈局類

以下是Tailwind CSS 表格佈局類列表，它提供了一種有效處理表格佈局的方法。

類名	CSS 屬性
table-auto	table-layout: auto;
table-fixed	table-layout: fixed;

Tailwind CSS 表格佈局類的功能

table-auto: 此類指定表格應根據某種自動佈局演算法進行佈局。瀏覽器將根據內容計算列和單元格的寬度。
table-fixed: 此類指定表格應根據提供的固定表格佈局方法進行佈局。

Tailwind CSS 表格佈局類示例

以下示例將演示 Tailwind CSS 表格佈局類實用程式。

自動佈局表格

透過使用`table-auto` 類，表格將根據某種自動佈局演算法進行佈局。

示例

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-3xl mb-3">
        Tailwind CSS Table Layout
    </h1>
    <table class="border-collapse table-auto w-full
                  border border-slate-500">
        <thead>
            <tr>
                <th class="bg-green-600 border 
                           border-slate-600">
                    Acronym
                </th>
                <th class="bg-green-600 border 
                           border-slate-600">
                    Stand For
                </th>
                <th class="bg-green-600 border 
                           border-slate-600">
                    Description
                </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>
                <td class="bg-green-300 border 
                           border-slate-700">
                     HTML is used to create content and
                     structure of any web page. 
                </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>
                <td class="bg-green-300 border 
                           border-slate-700">
                     It's a style sheet language used
                     for describing the presentation
                     of a document written in a markup
                     language like HTML
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

固定佈局表格

透過使用`table-fixed` 類，表格將根據提供的固定表格佈局方法進行佈局。

示例

<!DOCTYPE html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-3xl mb-3">
        Tailwind CSS Table Layout
    </h1>
    <table class="border-collapse table-fixed w-full
                  border border-slate-500">
        <thead>
            <tr>
                <th class="bg-green-600 border 
                           border-slate-600">
                    Acronym
                </th>
                <th class="bg-green-600 border 
                           border-slate-600">
                    Stand For
                </th>
                <th class="bg-green-600 border 
                           border-slate-600">
                    Description
                </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>
                <td class="bg-green-300 border 
                           border-slate-700">
                     HTML is used to create content and
                     structure of any web page. 
                </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>
                <td class="bg-green-300 border 
                           border-slate-700">
                     It's a style sheet language used
                     for describing the presentation
                     of a document written in a markup
                     language like HTML
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

列印頁面