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: 此类指定表格应根据提供的固定表格布局方法进行布局。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 表格布局类示例

以下示例将演示 Tailwind CSS 表格布局类实用程序。

自动布局表格

通过使用`table-auto` 类，表格将根据某种自动布局算法进行布局。

示例

Open Compiler

<!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` 类，表格将根据提供的固定表格布局方法进行布局。

示例

Open Compiler

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

打印页面