css calcの100%はどこの幅の事？

質問

幅を24分割したくてcalc(100% / 24)としましたが効きません。
↓のようになってます。
<tr><td></td>~~</tr>
tr {
width : 100%
}
td {
width : calc(100% / 24)
}
なぜでしょうか？

回答No.1

4017B · ベストアンサー

CSSでの width:100%; とは、その指定されたHTMLタグ要素の直近での親要素に対しての割合での100%という意味になります。

…ですのでのこの場合だと、 <tr> 要素の親要素と言う事になりますので、その表示されてるwebページの横幅一杯という意味では無く、あくまでも1つ上の親要素である <table> 要素と比較しての100%という意味で解釈されます。一般的に、<table> の中の <td> などを均等幅にしたい場合、まず最初に親要素である <table> の横幅縦幅を事前に指定して置き。後はそれに基づいて calc() なり何なりで実際に表示されるサイズを割り出させる様にします。

<table class="mytable">
<tr><td></td>....<td></td></tr>
</table>

.mytable {
border: 1px solid #000;
background-color: #ccc;
width: 100%;
min-width:240px; min-height:60px;
}
.mytable td {
width: calc(100% / 24);
border-right: 1px solid #000;
}

～とりあえずこんな感じでしょうか？細かい微調整は実際に質問者が確認しながら適宜、数値調整などを行ってください。

お礼

ご回答ありがとうございます。いろいろ試しておりお礼が遅れすみません。tableにwidth : 100%を書くことでできました。ちなみに、ulタグでも試してみましたが、ulのliはhtmlもbodyもulにもwidthが設定されていなくてもliにwidth : 100%が設定されていれば効くのに対して、tableはtdに設定されただけではだめで、tableにwidth : 100%が設定されていないとだめなようですね。