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来实现我认为您想要实现的目标。

td忽略了宽度，但高度得到尊重

1 个答案: