uni-app中手写table表格
时间: 2023-12-23 07:06:21 浏览: 38
在uni-app中手写表格可以使用HTML表格标签进行实现。以下是一个简单的例子:
```html
<template>
<view class="table-container">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>男</td>
</tr>
</table>
</view>
</template>
<style>
.table-container {
overflow-x: scroll;
/* 横向滚动条 */
}
table {
border-collapse: collapse;
/* 边框合并 */
width: 100%;
}
th,
td {
border: 1px solid #ddd;
/* 边框样式 */
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
/* 表头背景色 */
}
</style>
```
这段代码会生成一个包含三列数据的表格,包括姓名、年龄和性别。通过CSS样式可以控制表格的样式,比如设置表头背景色、边框样式等。同时,为了在移动端能够滚动查看整张表格,可以设置容器的横向滚动条。