css - td 忽略宽度但尊重高度

Question

我正在尝试使用 css 设置 td 的宽度和高度。高度工作正常，宽度被忽略。我敢肯定，当答案显示给我时，这是我要打自己的事情之一。我检查了拼写，尝试了 em 和 px，但 width 被忽略了。这是显示问题的 fiddle 的链接: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 表 变大，您将能够看到对 #disp_output td 的宽度进行了调整。

考虑拆分 .overall_theme table、.overall_theme tr、.overall_theme td、.overall_theme th 的宽度的 CSS 规则，或者使用 min-width 来实现什么我认为您正在努力实现。