本人非专业的IT人士，以前也没有搞过JAVA等软件开发经验，经验比较差，先声明一下。最近想自己编一个简单的计算软件，于是找到Hbuilder的uni-app，据说功能强大，但还是废话少说，我碰到了如下问题：
我所开发的软件主要是用到了Table组件，也下载了Z-table和t-table，觉得达不到自己的需求，所以用通用的table组件开发，通过web浏览器运行，满足我自己的需求，运行界面如下： 
但是我运行到手机（手机是miui10）后，table的布局完全乱了，好像table没有生效，截图如下：
不知道是什么原因，网上查了很多也没找到，请各路大神指点一下。
<template>
<div>
<div>
<table class="dataintable">
<caption style="color: #2F2F2F;font-size: 18px;bgcolor:red">圆管-管径计算风量</caption>
<tr>
<th style=" width:20%;">管径<br />(mm)</th>
<th style=" width:15%;">风速<br />(m/s)</th>
<th style=" width:15%;">温度<br />(℃)</th>
<th style=" width:25%;">标况风量<br />(Nm³/h)</th>
<th style=" width:25%;">工况风量<br />(m³/h)</th>
</tr>
<tr align="center">
<td><input type="digit" maxlength="7" @input="TB1_GJ_Input" />
</td>
<td><input type="digit" maxlength="5" @input="TB1_FS_Input" />
</td>
<td><input type="digit" maxlength="5" placeholder="20" @input="TB1_WD_Input" />
</td>
<td><text style="color: blue;font-size: 16px;">{{TB1_BKFL}}</text></td>
<td><text style="color: red;font-size: 16px;">{{TB1_GKFL}}</text></td>
</tr>
</table>
</div>
<div>
<table class="dataintable">
<caption style="color: #2F2F2F;font-size: 18px;bgcolor:red">圆管-风量计算管径</caption>
<tr>
<th style=" width:35%;">工况风量<br />(m³/h)</th>
<th style=" width:15%;">风速<br />(m/s)</th>
<th style=" width:25%;">管道半径<br />(mm)</th>
<th style=" width:25%;">管道直径<br />(mm)</th>
</tr>
<tr align="center">
<td><input type="digit" maxlength="12" @input="TB2_GKFL_Input" />
</td>
<td><input type="digit" maxlength="5" @input="TB2_FS_Input" />
</td>
<td><text style="color: blue;font-size: 16px;">{{TB2_BJ}}</text></td>
<td><text style="color: red;font-size: 16px;">{{TB2_ZJ}}</text></td>
</tr>
</table>
</div>
<div>
<table class="dataintable">
<caption style="color: #2F2F2F;font-size: 18px;bgcolor:red">圆管-风量计算风速</caption>
<tr>
<th style=" width:35%;">工况风量<br />(m³/h)</th>
<th style=" width:25%;">管道直径<br />(mm)</th>
<th style=" width:25%;">管道半径<br />(mm)</th>
<th style=" width:15%;">风速<br />(m/s)</th>
</tr>
<tr align="center">
<td><input type="digit" maxlength="12" @input="TB3_GKFL_Input" />
</td>
<td><input type="digit" maxlength="10" @input="TB3_ZJ_Input" />
</td>
<td><text style="color: blue;font-size: 16px;">{{TB3_BJ}}</text></td>
<td><text style="color: red;font-size: 16px;">{{TB3_FS}}</text></td>
</tr>
</table>
</div>
</div>
</template>
<script>
中间省略了……
</script>
<style>
table.dataintable {
table-layout: fixed;
text-align: center;
margin-top: 20px;
margin-bottom: 5px;
border-collapse: collapse;
border: 1px solid #aaa;
width: 99%;
margin: 0 auto
}
table.dataintable th {
vertical-align: middle;
background-color: #2F2F2F;
border: 1px solid #3F3F3F;
color: #fff;
height: 25px;
font-size: 15px;
font-weight: normal;
}
table.dataintable td {
vertical-align: middle;
border: 1px solid #aaa;
font-size: 14px;
}
table.dataintable tr:nth-child(odd) {
background-color: #F5F5F5;
font-size: 14px;
word-wrap: break-word;
word-break: break-all;
}
table.dataintable tr:nth-child(even) {
background-color: #fff;
font-size: 14px;
word-wrap: break-word;
word-break: break-all;
}
</style>
