用uniapp写法绘制一个表格两行三列
时间: 2023-08-12 13:05:09 浏览: 138
uni-app table表格
5星 · 资源好评率100%
以下是一个示例代码,展示如何使用uniapp绘制一个简单的2行3列表格:
```html
<template>
<view class="table">
<view class="row">
<view class="cell">单元格1</view>
<view class="cell">单元格2</view>
<view class="cell">单元格3</view>
</view>
<view class="row">
<view class="cell">单元格4</view>
<view class="cell">单元格5</view>
<view class="cell">单元格6</view>
</view>
</view>
</template>
<style>
.table {
display: flex;
flex-direction: column;
border-collapse: collapse;
}
.row {
display: flex;
flex-direction: row;
}
.cell {
flex: 1;
height: 40rpx;
line-height: 40rpx;
text-align: center;
border: 1px solid #ccc;
}
</style>
```
在上述示例代码中,我们使用了flex布局来实现表格的排列。我们先定义了一个包含两行的外层容器,每一行使用一个flex容器来存放单元格。每个单元格使用一个view元素来表示,设置了高度、行高、文本居中、边框等样式。
你可以根据需要对单元格的样式进行自定义,例如修改高度、行高、边框颜色等。
阅读全文