Question

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

我用（width = 100％和height = 60％）创建了表，表包含

我的表格中有3个表格行。
并且每个表行包含3个表数据

我想为标记创建相等的对齐宽度。

我已经为td标签分配了33％，但是当我在模拟器和移动设备中检查时， td 标签的宽度不正确。

请给我解决方案。

HTML code：

<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;
}

Answer 1

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

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

在表中TD标签宽度在HTML中没有正确对齐？

1 个答案: