我正在为我在 phonegap 中的应用程序的一个 html 中实现该表，并且我以百分比对齐，因为它适合所有移动屏幕。
我用(宽度=100% 和高度=60%)创建了表格，表格包含
我的表格内有 3 行 。
每个表格行包含3个表格数据
我想为 标签设置相等的对齐宽度。
我已经为 td 标签分配了 33%，但是当我检查模拟器和移动设备时，td 标签的宽度不正确。
请给我解决方案。
HTML代码:
<table class="metricTable" background="media/img/Game background.png">
<tr>
<td class="metrics">
<input type="hidden" value="matches"/><input class="card_value" type="hidden" value=""/> <div class="card_content" align="center" style="color:#FFFFFF"></div>
</td>
<td class="metrics">
<input type="hidden" value="runs"/><input class="card_value" type="hidden" value=""/><div class="card_content" align="center" style="color:#FFFFFF"></div>
</td>
<td class="metrics">
<input type="hidden" value="centuries"/><input class="card_value" type="hidden" value=""/><div class="card_content" align="center" style="color:#FFFFFF"></div>
</td>
</tr>
<tr>
<td class="metrics">
<input type="hidden" value="fifties"/> <input class="card_value" type="hidden" value=""/><div class="card_content" align="center" style="color:#FFFFFF"></div>
</td>
<td class="metrics">
<input type="hidden" value="batting_average"/>
<input class="card_value" type="hidden" value=""/> <div class="card_content" align="center" style="color:#FFFFFF"></div>
</td>
<td class="metrics">
<input type="hidden" value="wickets"/><input class="card_value" type="hidden" value=""/><div class="card_content" align="center" style="color:#FFFFFF"></div>
</td>
</tr>
<tr>
<td class="metrics">
<input type="hidden" value="bowling_average"/>
<input class="card_value" type="hidden" value=""/><div class="card_content" align="center" style="color:#FFFFFF"></div>
</td>
<td class="metrics">
<input type="hidden" value="best_bowling"/><input type="hidden" value=""/>
<input class="card_value" type="hidden" value=""/><div class="card_content" align="center" style="color:#FFFFFF"></div>
</td>
<td class="metrics ">
<input type="hidden" value="catches"/><input class="card_value" type="hidden" value=""/><div class="card_content" align="center" style="color:#FFFFFF"></div>
</td>
</tr>
</table>
CSS 代码:
.metricTable {
width:100%;
height:60%;
}
.metricTable tr{
width:100% !important;
height:20% !important;
}
.metricTable td {
width:33% !important;
}
.metrics{
cursor:pointer;
font-size:14px;
}
最佳答案
一旦列将具有相同的宽度，您为什么不使用 table-layout: fixed;？
我想你也面临同样的问题 css display table cell requires percentage width
关于html - 在表格中，TD 标签宽度在 HTML 中没有正确对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22962277/