Table 表格
响应式导航栏组件。
行内 Tailwind/UnoCSS 用法
| 姓名 | 年龄 | 地址 |
|---|---|---|
| 张三 | 25 | 北京市朝阳区 |
| 李四 | 30 | 上海市浦东新区 |
斑马纹
| 姓名 | 年龄 | 地址 |
|---|---|---|
| 张三 | 25 | 北京市朝阳区 |
| 李四 | 30 | 上海市浦东新区 |
| 王五 | 28 | 广州市天河区 |
| 孙六 | 28 | 广州市天河区 |
带边框
| 姓名 | 年龄 | 地址 |
|---|---|---|
| 张三 | 25 | 北京市朝阳区 |
| 李四 | 30 | 上海市浦东新区 |
查看代码
html
<template>
<div class="space-y-4">
<table class="min-w-full">
<thead>
<tr class="bg-gray-100">
<th class="px-6 py-3 text-left text-sm font-semibold text-gray-600">
姓名
</th>
<th class="px-6 py-3 text-left text-sm font-semibold text-gray-600">
年龄
</th>
<th class="px-6 py-3 text-left text-sm font-semibold text-gray-600">
地址
</th>
</tr>
</thead>
<tbody>
<tr class="border-b bg-white transition-colors duration-200 hover:bg-gray-100">
<td class="px-6 py-4 text-sm text-gray-800">
张三
</td>
<td class="px-6 py-4 text-sm text-gray-800">
25
</td>
<td class="px-6 py-4 text-sm text-gray-800">
北京市朝阳区
</td>
</tr>
<tr class="border-b bg-white transition-colors duration-200 hover:bg-gray-100">
<td class="px-6 py-4 text-sm text-gray-800">
李四
</td>
<td class="px-6 py-4 text-sm text-gray-800">
30
</td>
<td class="px-6 py-4 text-sm text-gray-800">
上海市浦东新区
</td>
</tr>
</tbody>
</table>
<p>斑马纹</p>
<table class="min-w-full">
<thead>
<tr class="bg-gray-100">
<th class="px-6 py-3 text-left text-sm font-semibold text-gray-600">
姓名
</th>
<th class="px-6 py-3 text-left text-sm font-semibold text-gray-600">
年龄
</th>
<th class="px-6 py-3 text-left text-sm font-semibold text-gray-600">
地址
</th>
</tr>
</thead>
<tbody>
<tr class="border-b bg-white transition-colors duration-200 hover:bg-gray-100">
<td class="px-6 py-4 text-sm text-gray-800">
张三
</td>
<td class="px-6 py-4 text-sm text-gray-800">
25
</td>
<td class="px-6 py-4 text-sm text-gray-800">
北京市朝阳区
</td>
</tr>
<tr class="border-b bg-gray-100 transition-colors duration-200 hover:bg-gray-100">
<td class="px-6 py-4 text-sm text-gray-800">
李四
</td>
<td class="px-6 py-4 text-sm text-gray-800">
30
</td>
<td class="px-6 py-4 text-sm text-gray-800">
上海市浦东新区
</td>
</tr>
<tr class="border-b bg-white transition-colors duration-200 hover:bg-gray-100">
<td class="px-6 py-4 text-sm text-gray-800">
王五
</td>
<td class="px-6 py-4 text-sm text-gray-800">
28
</td>
<td class="px-6 py-4 text-sm text-gray-800">
广州市天河区
</td>
</tr>
<tr class="border-b bg-gray-100 transition-colors duration-200 hover:bg-gray-100">
<td class="px-6 py-4 text-sm text-gray-800">
孙六
</td>
<td class="px-6 py-4 text-sm text-gray-800">
28
</td>
<td class="px-6 py-4 text-sm text-gray-800">
广州市天河区
</td>
</tr>
</tbody>
</table>
<p>带边框</p>
<table class="min-w-full border">
<thead>
<tr class="bg-gray-100">
<th class="border px-6 py-3 text-left text-sm font-semibold text-gray-600">
姓名
</th>
<th class="border px-6 py-3 text-left text-sm font-semibold text-gray-600">
年龄
</th>
<th class="border px-6 py-3 text-left text-sm font-semibold text-gray-600">
地址
</th>
</tr>
</thead>
<tbody>
<tr class="transition-colors duration-200 hover:bg-gray-100">
<td class="border px-6 py-4 text-sm text-gray-800">
张三
</td>
<td class="border px-6 py-4 text-sm text-gray-800">
25
</td>
<td class="border px-6 py-4 text-sm text-gray-800">
北京市朝阳区
</td>
</tr>
<tr class="transition-colors duration-200 hover:bg-gray-100">
<td class="border px-6 py-4 text-sm text-gray-800">
李四
</td>
<td class="border px-6 py-4 text-sm text-gray-800">
30
</td>
<td class="border px-6 py-4 text-sm text-gray-800">
上海市浦东新区
</td>
</tr>
</tbody>
</table>
</div>
</template>