表格tr根据内容撑开高度并且每个td继承tr的高度(height:inherit,align-items: stretch)

项目设计图
表格tr根据内容撑开高度并且每个td继承tr的高度(height:inherit,align-items: stretch)_第1张图片
实际上数据又长又短,例如类型有可能出现2行甚至3行的字数,所以整个行要适配最高的高度,然后其他子元素继承行的高度。
ps:原生的table或者uview的u-table都不怎么好使,所以用view来做
在做的过程中出现高度不一致导致border没能链接上
表格tr根据内容撑开高度并且每个td继承tr的高度(height:inherit,align-items: stretch)_第2张图片
弹性布局,行的align-items设置为stretch,不设置高度,可以设置最小高度,height:inherit继承父元素的高度

.tr{
	min-height: 64rpx;
	background: #F5FAFF;
	align-items: stretch !important;
}
.td{
	height:inherit;//不设置高度,继承父元素高度
	word-break:break-all;//宽度不够时,单词进行断句换行
}

word-break:break-all效果图(commission)
在这里插入图片描述

你可能感兴趣的:(css,css)