微信小程序中使用table

<view class="table-box">
	<view class="table">
    	<!-- 表格标题 -->
        <view class="tr">
        	<view class="th" wx:for="{{thList}}" wx:key="index">{{item}}</view>
        </view>
        <!-- 表格内容 -->
        <view class="tr" wx:for="{{trList}}" wx:for-item="tdList" wx:key="index">
        	<view class="td" wx:for="{{tdList}}" wx:key="index_">{{item}}</view>
    	</view>
	</view>
</view>
	Page({
		data: {
			thList: ['name', 'age', 'sex', 'long'],
			trList: [ // 用二维数组把每一行的数据汇总
				['张三', 18, '男', '188cm'],
				['李四', 19, '男', '178cm'],
				['王五', 20, '男', '168cm'],
				['赵六', 21, '男', '158cm']
			]
		}
	})
.table-box {
  height: 100%;
  overflow-x: auto;
  margin: 30rpx;
  background: #fff;
  border-radius: 16rpx;
}

.table {
  border-radius: 8rpx;
  margin: 0 auto;
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  overflow-x: auto;
  word-break: keep-all;
  background-color: #FFFFFF;
  border-radius: 16rpx;
}

.tr {
  display: table-row;
}

.th {
  display: table-cell;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border: 2rpx solid #F3F4F7;
  border-right: none;
  border-bottom: none;
  padding: 0 30rpx;
  color: #747477;
  white-space: nowrap;
}

.td {
  padding: 0 10rpx;
  display: table-cell;
  height: 60rpx;
  vertical-align: middle;
  text-align: center;
  border: 2rpx solid #F3F4F7;
  border-right: none;
}
.th:first-child, 
.td:first-child {
  position: sticky;
  left: -2rpx;
  background: #fff;
}
.th:first-child {
  background: #fff;
  z-index: 1; /*左上角单元格z-index,切记要设置,不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
}

注:
display: table-cell垂直居中使用:vertical-align: middle;
第一行/列固定: table-layout: fixed;position:sticky;

postion的sticky粘性定位
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值>前为相对定位,之后为固定定位。
sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow是hidden、scroll、auto、overlay时),即便这个祖先不是最近的真实可滚动祖先。

table-layout的fixed
table-layout css属性定义了用于布局表格单元格,行和列的算法。值可以是:auto、fixed。

  • auto
    表格和单元格的宽度取决于其包含的内容。
  • fixed
    表格宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定,其他行单元格的宽度不会影响整列的宽度。

分析:在表格中,某些列需要指定不同的宽度,所以表格的table-layout css属性需要设置为fixed。

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值