最近在使用uniapp写表格,记录一下
表格table
display:table;
行tr
display:table-row;
单元格
display:table-cell;
居中
vertical-align: middle;
text-align: center;
标题
display: table-caption;
基础使用
<template>
<view class="table">
<view class="t-title">基础使用</view>
<view class="tr">
<view class="th">姓名</view>
<view class="th">年龄</view>
<view class="th">班级</view>
</view>
<view class="tr">
<view class="td">齐安</view>
<view class="td">18</view>
<view class="td">16102</view>
</view>
<view class="tr">
<view class="td">齐安</view>
<view class="td">18</view>
<view class="td">16102</view>
</view>
<view class="tr">
<view class="td">齐安</view>
<view class="td">18</view>
<view class="td">16102</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.table {
display: table;
width: 300px;
border-collapse: collapse;
margin-bottom: 100px;
}
.t-title {
display: table-caption;
vertical-align: middle;
text-align: center;
}
.th {
display: table-cell;
font-weight: bold;
height: 100%;
text-align: center;
vertical-align: middle;
background-color: #e6d2d5;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
height: 100%;
// width: 100%;
text-align: center;
vertical-align: middle;
}
.sub-table {
width: 100%;
// height: 100%;
display: table;
}
.sub-tr {
display: table-row;
height: 100%;
}
.sub-td {
display: table-cell;
height: 100%;
text-align: center;
vertical-align: middle;
// border: 1px solid gray;
}
</style>