微信小程序实现简易table效果

.wxml

<view class="table-container">
  <scroll-view class="table-scroll" scroll-x>
    <view class="table-wrapper">
      <view class="header-wrapper">
        <view class="header">
        <text class="cell">列1</text>
      <text class="cell">列2</text>
      <text class="cell">列3</text>
      <text class="cell">列4</text>
      <text class="cell">列5</text>
      <text class="cell">列6</text>
      <text class="cell">列7</text>
      <text class="cell">列8</text>
      <text class="cell">列9</text>
      <text class="cell">列10</text>
      <text class="cell">列11</text>
      </view>
      </view>
     
      <view class="content-wrapper">
      <scroll-view class="content" scroll-x scroll-y>
     
    <view class="row">
     <text class="cell">行1列1</text>
      <text class="cell">行1列2</text>
      <text class="cell">行1列3</text>
      <text class="cell">行1列4</text>
      <text class="cell">行1列5</text>
      <text class="cell">行1列6</text>
      <text class="cell">行1列7</text>
      <text class="cell">行1列8</text>
      <text class="cell">行1列9</text>
      <text class="cell">行1列10</text>
      <text class="cell">行1列11</text>
    </view>
    <view class="row">
     <text class="cell">行2列1</text>
      <text class="cell">行2列2</text>
      <text class="cell">行2列3</text>
      <text class="cell">行2列4</text>
      <text class="cell">行2列5</text>
      <text class="cell">行2列6</text>
      <text class="cell">行2列7</text>
      <text class="cell">行2列8</text>
      <text class="cell">行2列9</text>
      <text class="cell">行2列10</text>
      <text class="cell">行2列11</text>
    </view>
    <view class="row">
     <text class="cell">行3列1</text>
      <text class="cell">行3列2</text>
      <text class="cell">行3列3</text>
      <text class="cell">行3列4</text>
      <text class="cell">行3列5</text>
      <text class="cell">行3列6</text>
      <text class="cell">行3列7</text>
      <text class="cell">行3列8</text>
      <text class="cell">行3列9</text>
      <text class="cell">行3列10</text>
      <text class="cell">行3列11</text>
    </view>
    <view class="row">
     <text class="cell">行4列1</text>
      <text class="cell">行4列2</text>
      <text class="cell">行4列3</text>
      <text class="cell">行4列4</text>
      <text class="cell">行4列5</text>
      <text class="cell">行4列6</text>
      <text class="cell">行4列7</text>
      <text class="cell">行4列8</text>
      <text class="cell">行4列9</text>
      <text class="cell">行4列10</text>
      <text class="cell">行4列11</text>
    </view>
      </scroll-view>
    </view>
    </view>
  </scroll-view>
</view> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

.wxss

实现表格表头固定 表格内容随着表头可以滑动并且可以根据设定的内容高度300rpx实现滑动请求

.table-container {
  height: 400rpx; /* 表格容器高度 */
  overflow: hidden; /* 隐藏超出容器高度的内容 */
}

.table-scroll {
  width: 100%;
  height: 100%;
}

.table-wrapper {
  display: flex;
  flex-direction: column;
  /* 最小宽度是内容的最大适应宽度 */
  min-width: max-content;
}

.header-wrapper {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #f5f5f5;
  border-bottom: 1rpx solid #ccc;
}

.header {
  display: flex;
}

.content {
  flex-grow: 1;
  height: 300rpx;
}

.row {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #ccc;
}

.cell {
  flex: 1;
  padding: 10rpx;
  text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45