td忽略寬度​​但高度很高

Question

我正在嘗試使用css來設置td的寬度和高度。高度工作正常，寬度被忽略。我敢肯定，當我向他們展示答案時，這就是我要打擊自己的事情之一。我檢查了拼寫，嘗試了em和px，但寬度卻被忽略了。下面是一個小提琴一個鏈接顯示的問題：http://jsfiddle.net/kdubs/jBjr2/

的HTML

<div class="overall_theme"> 
<table id="disp_output"> 
<tbody> 
    <tr> 
    <th>Advantages</th> 
    <td id="disp_ads">00</td> 
    </tr> 
    <tr> 
    <th>Disadvantages</th> 
    <td id="disp_disads">0</td> 
    </tr> 
    <tr> 
    <th>Total</th> 
    <td id="disp_total">0</td> 
    </tr> 
    <tr> 
    <th>dbg</th> 
    <td id="dbg_td">txt</td> 
    </tr> 
</tbody> 
</table> 
</div> 

和CSS

.overall_theme table, .overall_theme tr, .overall_theme td, .overall_theme th { 
    text-align:center; 
    border-collapse:collapse; 
    border: 1px solid black; 
    width:2em; 
} 
.overall_theme table { 
    background-color:cornflowerblue; 
    margin-top:.5em; 
    margin-bottom:.5em; 
} 
.overall_theme > table > tbody > tr > td:nth-child(odd), .overall_theme th:nth- child(odd) { 
background-color:#00cc00; 
} 
#disp_output td { 
    width:30em; 
    height:35px; 
} 

Answer 1

有幾個原因：

你的第一條規則是不是更具體最後一條規則。嘗試使最後的規則更爲具體：

.overall_theme #disp_output td { 
    width:30em; 
    height:35px; 
} 

有關特異性的詳細信息，請參閱：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

其次，#disp_output td寬度顯著比.overall_theme table大。對於第1列中的內容，表格已經大於2em。

如果您將.overall_theme table放大，您將依次看到寬度爲#disp_output td的調整。

考慮拆分寬度爲.overall_theme table, .overall_theme tr, .overall_theme td, .overall_theme th的CSS規則或使用min-width來實現我認爲您嘗試實現的目標。