评论

自定义表格

锁定首行、首列表格,可上下左右滑动


index.wxml

    
        
            XX
            首行1
            首行2
            首行3
            首行4
        
    
  <view class="table">
    <view class="thead">
        <view class="tr">
            <view class="th">XX</view>
            <view class="th">首行1</view>
            <view class="th">首行2</view>
            <view class="th">首行3</view>
            <view class="th">首行4</view>
        </view>
    </view>
    <view class="tbody">
        <view class="box">
            <view class="tr">
                <view class="td">哇哦1</view>
                <view class="td">哇哦2</view>
                <view class="td">哇哦3</view>
                <view class="td">哇哦4</view>
                <view class="td">哇哦5</view>
            </view>
            <view class="tr">
                <view class="td">哇哦131412314123523123</view>
                <view class="td">哇哦</view>
                <view class="td">哇哦哇哦哇哦哇哦哇哦</view>
                <view class="td">哇哦哇哦</view>
                <view class="td">哇哦哇哦</view>
            </view>
            <block wx:for="{{22}}">
                <view class="tr">
                    <view class="td">哇哦哇哦</view>
                    <view class="td">哇哦</view>
                    <view class="td">哇哦</view>
                    <view class="td">哇哦</view>
                    <view class="td">哇哦</view>
                </view>
            </block>
            
            <view class="tr last">
                <view class="td">哇哦</view>
                <view class="td">哇哦</view>
                <view class="td">哇哦</view>
                <view class="td">哇哦</view>
                <view class="td">哇哦</view>
            </view>
        </view>
    </view>
</view>

index.wxss

.table {
  display: flex;
  flex-direction: column;
  width100%;
  height200px;
  background-color#eee;
  overflow: auto;
}


.thead {
  z-index2;
  display: flex;
  flex-direction: row;
  position: sticky;
  top0;
}


.tbody {
  z-index1;
  display: flex;
  flex-direction: row;
}


.tr {
  display: flex;
  flex-direction: row;
}


.td, .th {
  width100px;
  border-bottom1px solid black;
  border-right1px solid black;
  box-sizing: border-box;
  /* 超出长度显示 ... */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.td:first-child, .th:first-child {
  /* 设置首列200 ,设置th才有效*/
  /* width: 200px; */
  border-left1px solid black;
}


/* 如果border collapse,滚动会跟着动,所以单独给每个元素设置border */
.td:last-child, .th:last-child {
  border-right1px solid black;
}


.last .td {
  /* 最后一行底部border */
  border-bottom1px solid black;
}


.thead .tr .th {
  /* th设置粘性定位 */
  background-color: pink;
  position: sticky;
  top0;
  /* 顶部border */
  border-top1px solid black;
}


.td:first-child {
  /* td第一个粘性定位 */
  position: sticky;
  left0;
  background-color: skyblue;
}


.thead .tr .th:first-child {
  /* 第一个由于要保持上下和左右滚动都不被覆盖,设置在最上面 */
  z-index2;
  left0;

}

最后一次编辑于  2020-12-07  
点赞 0
收藏
评论
登录 后发表内容