5

これ自体はそれほど問題ではありませんが、何が起こっているのかを知りたいので、それを理解することができます. 現在、デザインのフッターに 1 つのテーブルを使用する必要がある新しい Web サイトをコーディングしています。(私はあまり使用しませんが、この表はこのプロジェクトの作業をずっと楽にしてくれます。)

要素が width:%; のみのテーブル td に CSS クラスを使用しています。しかし、なんらかの理由で理解できません。% を 10% から 20% に増やすと、実際には td の幅が狭くなります。完全に後ろ向き。

私は本当にこれに困惑しています、誰かこれを説明できますか?

HTML:

<div class="footertable">
<table border="2">
<tbody>
<tr>
<td valign="top" class="footer">
<div class="footerheading">SHOPPING</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">CUSTOMER SERVICE</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">PAYMENT OPTIONS</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">SOCIAL</div>
</td>
<td valign="top" class="footer">
<div class="footerheading">ORDER</div>
</td>
</tr>
</tbody>
</table>
</div>​

CSS:

.footertable { margin:auto; max-width:1080px;}
td.footer {width:10%;}​

ノート：

  • パーセンテージが 24 未満の場合、奇妙な動作が発生します。15 から 23 にすると全体の幅が減少し、23 から 24 にすると突然拡大します。パーセンテージが 24 を超えると、通常の動作になります。
  • テーブルに max-width を指定するか、幅だけを指定するかは問題ではありません
  • この問題は、chrome、firefox、opera、および IE9 で再現可能です。
  • jsFiddle はこちら: http://jsfiddle.net/BPygA/
4

2 に答える 2

2

テーブルレイアウトにはファンと嫌悪感がありますが、確かに、それは高度な操作です。これは、最終的に列の幅を決定する力の組み合わせのようなものです。そして、多くの入力変数があります：

  • table-layout：fixedかどうか
  • テーブルには特定の幅があります（ピクセルまたはパーセントで、またはまったくない）
  • すべての列に幅がありますか？
  • テーブルにcolgroup要素がありますか？
  • テーブルにはどのくらいのスペースがありますか？
  • 壊れない内容のセルはありますか？

経験の浅い人にとっては悪夢のようなものです。

特定の状況では、テーブルに特定の幅はありません。つまり、列の幅の合計になります。ただし、列のサイズはパーセンテージで表示されます。これは、テーブル全体の幅のパーセンテージになります。これは鶏が先か卵が先かという問題であることがわかります。

また、合計が100％にならないパーセンテージを使用することは、一種の未定義です。

私は一歩下がって、あなたが何を達成しようとしているのかを正確に考えます。

于 2012-04-11T00:27:14.703 に答える
1

表のセルの幅が 10% と 20% の間で切り替わる動作を確認できます。

(含まれている ではなく) テーブル自体に幅を追加するとDIV、動作が変わります。

http://jsfiddle.net/BPygA/2/

テーブル自体に幅がない場合、ブラウザーはコンテンツに基づいてセルを表示する方法を推測します。パーセンテージがより大きな数値に設定されているときに、より小さな幅を選択する理由はわかりませんが、これは非決定論的な計算であるため、ブラウザーは自由に実行できます (以下の仕様を参照)。

言い換えれば、テーブルに幅がない場合、各セルが自由に決定できる変数値の 10% であることをブラウザに伝えていることになります。

別の考慮事項は、テーブルに 5 つのセルがあることです。それぞれを 10% に設定すると、全体の幅はわずか 50% になります。繰り返しになりますが、ブラウザーは幅の合計を推測する必要がありますが、考慮されていない残りの 50% をどうするかを決定する必要もあります。

@Jacob が指摘したように、W3 は推奨事項 (推奨事項のみ) を定義して、ユーザー エージェントがテーブルをレンダリングする方法をガイドします。

このアルゴリズムは、この仕様の執筆時点でのいくつかの一般的な HTML ユーザー エージェントの動作を反映しています。「table-layout」が「auto」の場合、UA はテーブル レイアウトを決定するためにこのアルゴリズムを実装する必要はありません。異なる動作になる場合でも、他のアルゴリズムを使用できます。

UA は要求されたパーセンテージを使用しようとする必要がありますが、常に可能であるとは限りません。

列幅のパーセンテージ値は、テーブル幅に対する相対値です。テーブルに 'width: auto' がある場合、パーセンテージは列の幅に対する制約を表し、UA はこれを満たそうとします。(明らかに、これは常に可能であるとは限りません。列の幅が「110%」の場合、制約を満たすことはできません。)

http://w3.org/TR/CSS2/tables.html#propdef-table-layout

より良い説明に興味があります。

于 2012-04-10T23:42:31.453 に答える