大家好!用样式写的表格布局,开发工具基本正常,手机浏览有问题,麻烦大家帮忙看看
开发工具下是正常的:如下图:
样式如下:
.table {
border:1px solid #dadada;
border-right: 0;
border-bottom: 0;
width: 100%;
}
.tr {
width: 100%;
display: flex;
justify-content: space-between;
}
.th,.td {
padding: 3px;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
text-align: center;
width:100px;
min-height:30px;
word-break: break-all;
}
.th {
font-weight: 400;
background-color: #dadada
}
真机的屏幕大小和模拟器的不一样啊,你用的px固定宽度,肯定显示不一样了
前端代码是这样写的:
<view class="table" wx:if="{{contentlist.length>0}}">
<view class="tr">
<view class="th">Select <checkbox bindtap="selectall"/></view>
<view class="th">Inquiry</view>
<view class="th">Designation</view>
</view>
<checkbox-group bindchange="checkboxChange">
<view class="tr" wx:for="{{contentlist}}" wx:for-item="item" wx:key="tpid">
<view class="td"><checkbox value="{{item.tpid}}" checked="{{item.checked}}"/></view>
<view class="td"><navigator url="/pages/request/index?curname={{item.pxh}}"><view class="icon-envelope-o"></view> </navigator></view>
<navigator url="/pages/pro_detail/index?id={{item.tpid}}">
<view class="td">{{item.pxh}}</view>
</navigator>
</view>
</checkbox-group>
</view>
</view>
手机上用表格布局?