0

我正在尝试使用 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;
}
4

1 回答 1

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。

考虑将 CSS 规则拆分为宽度.overall_theme table, .overall_theme tr, .overall_theme td, .overall_theme th或用于min-width实现我认为您正在尝试实现的目标。

于 2013-01-06T04:06:07.647 回答