是否可以使用纯css将表格的第一列(左)和线程(顶部)保持在固定位置?

时间:2018-01-24 02:21:55

标签: css

<view class="left-table">
  <view class="thread">{{data[0][0][0]}}</view>
  <view class="tbody" wx:for="{{data}}" wx:key="{{index}}">{{item[0][1]}}</view>
</view>
<view class="right-table">
  <view class="thread">
    <view wx:for="{{data[0]}}" wx:key="{{index}}" wx:if="{{index !== 0}}">{{item[0]}}</view>
  </view>
  <view class="tbody" wx:for="{{data}}" wx:key="{{index}}">
    <view wx:for="{{item}}" wx:for-item="component" wx:for-index="idx" wx:key="{{idx}}" wx:if="{{idx !== 0}}">
      <view class="grid-data">{{component[1]}}</view>
      <view class="grid-cal">{{component[2]}}</view>
      <view class="grid-cal">{{component[3]}}</view>
    </view>
  </view>
</view>

.left-table {
width:180rpx;
display:block;
flex-direction:column;
position:absolute;
left:0;
top:0;
}

.thread {
  white-space: nowrap;
  height: 100rpx;
}

.thread > view {
  display: inline-block;
  text-align: center;
  width:180rpx;
}

.tbody {
height:250rpx;
white-space:nowrap;
}

.right-table {
  position:relative;
  left:180rpx;
  width: 570rpx;
  overflow: scroll;
}

.tbody > view {
width:180rpx;
display:inline-block;
text-align: center;
}

现在通过这个实现,我可以在屏幕上保留左侧第一列,但顶部仍然滚动。是否可以将顶部保持在固定位置?

0 个答案:

没有答案