笙亿网络策划

Tailwind CSS caption-side 属性怎么设置？

约 7 分钟读完 31 阅
文章导读
Previous Quiz Next Tailwind CSS Caption Side 是一个 utility class，用于控制表格内 caption 元素的对齐方式。
📋 目录
  1. 壹 Tailwind CSS Caption Side Classes
  2. 贰 Tailwind CSS Caption Side Classes 的功能
  3. 叁 Tailwind CSS Caption Side Class 示例
  4. 肆 将 Caption 设置在顶部
  5. 伍 设置表格标题置于底部
A A

Tailwind CSS - Caption Side

Previous
Quiz
Next

Tailwind CSS Caption Side 是一个 utility class，用于控制表格内 caption 元素的对齐方式。

Tailwind CSS Caption Side Classes

以下是 Tailwind CSS Caption Side 类列表，这些类提供了有效处理表格内 caption 元素对齐方式的方法。

Class CSS Properties
caption-top caption-side: top;
caption-bottom caption-side: bottom;

Tailwind CSS Caption Side Classes 的功能

  • caption-top: 该类用于将 caption 放置在表格上方。
  • caption-bottom: 该类用于将 caption 放置在表格下方。

Tailwind CSS Caption Side Class 示例

以下示例将演示 Tailwind CSS Caption Side class 的用法。

将 Caption 设置在顶部

使用 `caption-top` class 可以将 caption 对齐到表格顶部。

示例

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

<body class="p-4">
    <h1 class="text-3xl mb-3">
        Tailwind CSS Caption Side
    </h1>
    <table class="border-collapse w-full
                  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 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>

设置表格标题置于底部

通过使用 `caption-bottom` class，我们可以将 caption 对齐到 table 的底部。

示例

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

<body class="p-4">
    <h1 class="text-3xl mb-3">
        Tailwind CSS Caption Side
    </h1>
    <table class="border-collapse w-full
                  border border-slate-500">
        <caption class="caption-bottom">
            Table Caption: Starting of Web Development
        </caption>
        <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>