uniapp-css-table

最近在使用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>