0

css を使用して td の幅と高さを設定しようとしています。高さは正常に機能し、幅は無視されます。これは、答えが示されたら、きっと自分を叩くものの 1 つです。スペルをチェックし、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/を参照してください。

第 2 に、 の幅は#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

于 2013-01-06T04:06:07.647 に答える