Tailwind CSS - Table Layout
Tailwind CSS Table Layout是一个用于控制表格布局算法的实用类。
Tailwind CSS Table Layout 类
以下是Tailwind CSS Table Layout类的列表，它们提供了一种有效的表格布局处理方法。
| 类 | CSS 属性 |
|---|---|
| table-auto | table-layout: auto; |
| table-fixed | table-layout: fixed; |
Tailwind CSS 表格布局类的功能
- table-auto 此类指定表格应根据某些自动布局算法进行布局。浏览器将根据列和单元格的内容计算其宽度。
- table-fixed 此类指定表格应根据提供的固定表格布局方法进行布局。
Tailwind CSS 表格布局类示例
以下示例将说明 Tailwind CSS 表格布局类的实用功能。
自动布局表格
使用 `table-auto` 类，表格将根据某些自动布局算法进行布局。
示例
<!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` 类，表格将根据提供的固定表格布局方法进行布局。
示例
<!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>
