Tailwind CSS - Caption Side
Tailwind CSS caption-side 是一个实用类，用于控制表格内标题元素的对齐方式。
Tailwind CSS caption-side 类
以下是 Tailwind CSS 标题侧边 类的列表，这些类提供了一种有效的方法来处理表格内标题元素的对齐方式。
| 类 | CSS 属性 |
|---|---|
| caption-top | caption-side: top; |
| caption-bottom | caption-side: bottom; |
Tailwind CSS 标题侧边类的功能
- caption-top:此类用于将标题置于表格上方。
- caption-bottom:此类用于将标题置于表格下方。
Tailwind CSS 标题侧边类示例
以下示例将说明 Tailwind CSS 标题侧边类的实用功能。
将标题置于顶部
通过使用 `caption-top` 类，我们可以将标题对齐到表格顶部。
示例
<!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` 类，我们可以将标题对齐到表格底部。
示例
<!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>
