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

空&白

已于 2023-07-13 12:21:22 修改

阅读量828

点赞数

分类专栏： css 文章标签： css

于 2023-07-13 12:20:19 首次发布

本文链接：https://blog.csdn.net/qq_32707555/article/details/131699592

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

项目设计图
在这里插入图片描述
实际上数据又长又短，例如类型有可能出现2行甚至3行的字数，所以整个行要适配最高的高度，然后其他子元素继承行的高度。
ps：原生的table或者uview的u-table都不怎么好使，所以用view来做
在做的过程中出现高度不一致导致border没能链接上
在这里插入图片描述
弹性布局，行的align-items设置为stretch，不设置高度，可以设置最小高度,height:inherit继承父元素的高度

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