某天在写⼩程序表格时偶然发现⼩程序没有table标签，在⼩程序社区搜索了⼀番发现官⽅给出的说法是view能够满⾜table样式，⾜以替代table标签。 nfc天线以下⽤原⽣的⼩程序代码写了⼀版简单的表格，其中表格可以左右滑动，固定表头上下滑动。
wxml
<!-- 表格 -->
<view class="table">
<!-- 整体横向滑动 -->
<scroll-view class="tableX" scroll-x>
<!-- 表头 -->
<view class="tr">
<view class="th">{{"序号"}}</view>
<view class="th">{{"表头"}}</view>
<view class="th">{{"表头"}}</view>
<view class="th">{{"表头"}}</view>
<view class="th">{{"表头"}}</view>
<view class="th">{{"表头"}}</view>
<view class="th">{{"表头"}}</view>
</view>
<!-- 内容 -->
<!-- 除表头外纵向滑动 -->
<scroll-view class="tableY" scroll-y >
<view class="tr" wx:for="{{18}}" wx:key="index">
<view class="td">{{index}}</view>
<view class="td">{{"内容"}}</view>
<view class="td">{{"内容"}}</view>
<view class="td">{{"内容"}}</view>
<view class="td">{{"内容"}}</view>
<view class="td">{{"内容"}}</view>
<view class="td">{{"内容"}}</view>
</view>
</scroll-view>
</scroll-view>
涂改液
</view>
wxss
/* 项⽬表格 */
.table {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;spank站点集合营
justify-content: center;
钕铁硼磁性材料}
.tableX {
border: 1px solid #dadada;
玻璃纤维防火布
border-right: 0;配电装置
border-bottom: 0;
width: 93%;
}
.tr, .tableY {
width: 1400rpx;
display: flex;
justify-content: flex-start;
}
.th,.td {
width: 200rpx;
padding: 10px 0;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
text-align: center;
}
.th {
font-weight: bold;
}
后续再把表头写活，宽度⾃适应的话就更加完善了~
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议