Tailwind CSS - 标题侧边

Tailwind CSS 标题侧边 是一个实用程序类，用于控制表格内标题元素的对齐方式。

Tailwind CSS 标题侧边类

以下是Tailwind CSS 标题侧边类的列表，它提供了一种有效的方法来处理表格内标题元素的对齐方式。

类	CSS 属性
caption-top	caption-side: top;
caption-bottom	caption-side: bottom;

Tailwind CSS 标题侧边类功能

caption-top: 此类用于将标题放置在表格上方。
caption-bottom: 此类用于将标题放置在表格下方。

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 标题侧边类实用程序。

将标题设置在顶部

通过使用`caption-top`类，我们可以将标题与表格的顶部对齐。

示例

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 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`类，我们可以将标题与表格的底部对齐。

示例

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

打印页面