用uniapp写一个表格样式
时间: 2024-05-24 18:05:21 浏览: 63
uniapp 表格的介绍和使用
5星 · 资源好评率100%
好的,可以为您提供一个简单的示例代码:
<template>
<view class="table">
<view class="row header">
<view class="cell">姓名</view>
<view class="cell">年龄</view>
<view class="cell">性别</view>
</view>
<view class="row">
<view class="cell">小明</view>
<view class="cell">18</view>
<view class="cell">男</view>
</view>
<view class="row">
<view class="cell">小红</view>
<view class="cell">16</view>
<view class="cell">女</view>
</view>
</view>
</template>
<style>
.table {
display: flex;
flex-direction: column;
margin-left: 20px;
margin-right: 20px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
}
.header {
background-color: #eee;
}
.row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #ddd;
}
.cell {
flex-basis: 0;
flex-grow: 1;
padding: 10px;
text-align: center;
}
</style>
请注意,此代码仅提供了一个简单的表格样式示例,您可以根据自己的需求进行更改和定制。如果您有其他问题,可以随时问我哦!
阅读全文