收藏
回答

iOS 下table字体莫名变大,求解

页面中引入了一个表格,开发工具模拟和Android中显示正常。但在iOS下,表格中某些列的字体会莫名变大。如下图


注:每个td的样式都是相同的。但哪一列字体变大,目前未发现规律(同一表格的某些字体变大,可以重现)。


<scroll-view scroll-x="" class="scroll-area">
 
<view class="table">
 
<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 class="th">其他</view>
 
</view>
 
<view class="tr">
 
<view class="td">某某</view>
 
<view class="td">
 
<text>
 
21:45
 
</text>
 
</view>
 
<view class="td">
 
<text>
 
英语《名校课堂》M6M7错题复习
 
</text>
 
</view>
 
<view class="td">
 
<text>
 
50个
 
</text>
 
</view>
 
<view class="td">
 
<text>
 
</text>
 
</view>
 
<view class="td">
 
<text>
 
2分钟78个
 
</text>
 
</view>
 
<view class="td">
 
<text>
 
40秒一组(两组)
 
</text>
 
</view>
 
<view class="td"></view>
 
</view>
 
<view class="tr">
 
<view class="td">小张</view>
 
<view class="td">
 
<text>
 
21:45
 
</text>
 
</view>
 
<view class="td">
 
<text>
 
英语《名校课堂》M6M7错题复习
 
</text>
 
</view>
 
<view class="td">
 
<text>
 
50个
 
</text>
 
</view>
 
<view class="td">
 
<text>
 
</text>
 
</view>
 
<view class="td">
 
<text>
 
2分钟78个
 
</text>
 
</view>
 
<view class="td">
 
<text>
 
40秒一组(两组)
 
</text>
 
</view>
 
<view class="td"></view>
 
</view>
 
</view>
 
</scroll-view>

样式表如下:

.scroll-area{
  width: 100%;
  overflow: auto;
}
 
.table {
  display: table;
  min-width: 98%;
  border-collapse: collapse;
  margin: auto;
  white-space: nowrap;
  font-size: 16px;
}
 
.table .caption {
  display: table-caption;
  font-size: 20px;
  text-align: center;
  padding: 15px;
}
 
.table .tr {
  display: table-row;
  width: auto;
  height: auto;
  line-height: 60rpx;
}
 
.table .th {
  display: table-cell;
  font-weight: bold;
  border: 1px solid black;
  text-align: center;
  padding: 5px;
  vertical-align: middle;
  background-color: #ccc;
}
 
.table .td {
  display: table-cell;
  border: 1px solid black;
  text-align: left;
  padding: 4px;
  vertical-align: middle;
}
 
.td text{
  font-size: 16px;
}


最后一次编辑于  2018-12-12
回答关注问题邀请回答
收藏

2 个回答