微信小程序表格


.collect_data{
  position: fixed;
  top: 50px;
  background-color: #fff;
  box-shadow: 1px 1px 4px #ccc;
  border-radius: 4px;
  width: 96%;
  left: 2%;
  height: calc(100vh - 55px);
  display: flex;
  flex-direction: column;
}
.collect_data .collect_top{
  width: 100%;
  height: 30px;
  position: relative;
}
.collect_top .top_right{
  position:absolute;
  right: 4px;
  /* top:6px */
}
.collect_content{
   width: 96%;
   margin: 4px auto;
   height:80%;
   background-color: #ccc;
}
.content_scroll{
  position: relative;
  display: flex;
  flex-direction: column;
}
.white{
  width: auto;
  background-color: #fff;
  display:inline-block !important; 
  /* display:inline;  */
}
/* 每列数据 */
.content_item{
  white-space: nowrap;
  display: inline-block;
}
.content_item view{
  display: inline-block;
  width: 40px;
  height: 20px;
}
.content_item view:nth-child(2n+1){
  background-color: teal;
}
 <view class="collect_data">
    <view class="collect_top">
      <view class="top_right" bindtap="handleCloseCollect">
        ×
      </view>
    </view> 
 <view class="collect_content">
      <scroll-view scroll-x="true" class="content_scroll" scroll-x="true" style="height: 100%;width: 100%;">
        <view class="content_item">
          <view>序号</view>
          <view>证据</view>
          <view>采集</view>
          <view>频道</view>
          <view>采集</view>
          <view>次数</view>
          <view>状态</view>
          <view>意见</view>
          <view>图片</view>
        </view>
        <scroll-view scroll-y="true" class="white"  style="height: 100%">
          <view class="content_item">
          <view>序号</view>
          <view>证据</view>
          <view>采集</view>
          <view>频道</view>
          <view>采集</view>
          <view>次数</view>
          <view>状态</view>
          <view>意见</view>
          <view>图片</view>
        </view>
        <view>1</view>
          <view>1</view>
          <view>1</view>
          <view>1</view>
          <view>1</view>
          <view>1</view>
          <view>1</view>
          <view>1</view>
          <view>1</view>
          <view>1</view>
          <view>1</view>
        </scroll-view>
      </scroll-view>
    </view>
</view>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值