笙亿网络策划

Tailwind CSS 表格怎么用？如何快速构建响应式 table？

约 5 分钟读完 31 阅
文章导读
Previous Quiz Next Tailwind CSS 表格包括 Border Collapse、Border Spacing、Table layout 和 Caption Side。这些是 Tailwind 表格的重要概念，要设计表格，必须学习这些概念。
📋 目录
  1. Ⅰ Tailwind CSS 表格参考
  2. Ⅱ Tailwind CSS 表格示例
A A

Tailwind CSS - 表格

Previous
Quiz
Next

Tailwind CSS 表格包括 Border Collapse、Border Spacing、Table layout 和 Caption Side。这些是 Tailwind 表格的重要概念，要设计表格，必须学习这些概念。

Tailwind CSS 表格参考

下面列出的主题可用于在 Tailwind 中设计表格。

主题 描述 示例
Tailwind CSS - Border Collapse 用于控制表格边框是折叠还是分离。
Try It
Tailwind CSS - Border Spacing 用于控制边框之间的间距。
Try It
Tailwind CSS - Table Layout 用于控制表格布局算法。
Try It
Tailwind CSS - Caption Side 用于控制表格内 caption 元素的对齐方式。
Try It

Tailwind CSS 表格示例

下面的示例将演示 Tailwind CSS。我们将使用它来查看代码中每个主题的影响。

示例

<!DOCTYPE html>

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

<body class="p-4">
    <h1 class="text-3xl mb-3"> Tailwind CSS Tables </h1>
    <table class="border-separate table-fixed w-full
                  border-spacing-x-2
                  border border-slate-500">
        <caption class="caption-top"> 
            Table Caption: Starting of Web Development 
        </caption>
        <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>