在表格中，TD 标签的宽度在 HTML 中没有正确对齐？答案

【问题标题】：In a table TD tag width is not aligning properly in HTML?在表格中，TD 标签的宽度在 HTML 中没有正确对齐？
【发布时间】：2014-04-09 20:40:21
【问题描述】：

我正在为 phonegap 中的应用程序实现一个 html 中的表格，并以百分比对齐，因为它适合所有移动屏幕。

我用 (width=100% and height=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;
}

【问题讨论】：

标签： html css html-table

【解决方案1】：

一旦列的宽度相同，为什么不使用table-layout: fixed;？

我猜你也面临着同样的问题 css display table cell requires percentage width

【讨论】：