web-dev-qa-db-ja.com

TD幅が機能しない、またはフォローされないのはなぜですか？

元の質問：HTML <table>にはデフォルトの幅がありますか？

最近誰かがこれらの線に沿ってどこかで質問をして、私に不思議に思いました。

これを例にとります。

http://jsfiddle.net/rqmNY/1/

このフィドルで、幅をチェックすると（私はchromeのinspect要素を使用しています）、意図したとおりに機能している100pxが表示されます。

さらにいくつかの「td」を追加してみましょう。「td:100px」CSSが無視されていることがわかります。

http://jsfiddle.net/rqmNY/2/

ご覧のとおり、本来の100pxではなく83pxになりました。

しかし、仮に、より少ないTDに戻り（7）、各TD要素（500px）に広い幅を追加すると、結果としてtdの幅が固定されます。 119px。

http://jsfiddle.net/rqmNY/6/

そして最後に、2000px幅のテーブルと、100px幅のtd、および多くのtd要素があるとします。 http://jsfiddle.net/rqmNY/7/

これで、テーブルの幅がTD幅をオーバーライドし、tdの幅を222pxに拡張します。

誰かがこの動作を説明できますか？

pSすべてのケースで、要素の検査ツールは幅が常にcssに対応していることを通知します。これは、最終結果が正しく表示されていないためです。

htmlcsshtml-tablecolumn-width
8
He Hui

私はこの質問に対する答えがそのようなものであると強く信じています：

TDに影響する幅の優先順位は

  1. テーブル幅

  2. 親要素の幅（ない場合はビューポート）

  3. Element（TD）の幅。

したがって、テーブルの幅が設定されている場合、TDは常にテーブルの幅に調整されます。ただし、幅が設定されていない場合、「メイン」の幅はビューポートの実際の幅になります。 CSSコードで別段の定めがない限り、これは当てはまります。また、TDの合計幅がビューポートの合計幅よりも小さい場合のみ、要素の幅が考慮されます。

編集

  1. テーブルの幅は常にTD幅をオーバーライドします。

  2. 記載TD幅は、ビューポートの幅を超えるまでのみ追跡され、ビューポートの幅が優先されます。

17
He Hui

追加してみましたかdisplay:inline-block to your TD CSS？これにより、ブラウザはあなたのTD width。

21
Cynthia

W3ドキュメントによると ここ 「幅の指定がない場合、テーブルの幅はユーザーエージェントによって決定されます。」

tdと考えることができる幅は常にテーブルの幅に依存しています。指定するかどうか。幅500pxのテーブルと、幅200pxの2つのTDがある場合。テーブルにこれらの2つのTDを追加した後、対応する100pxが残っているので、元の幅プロパティを上書きする50pxが両方のTDにそれぞれ追加されます。このリンクを参照してください http://jsfiddle.net/rqmNY/7/

0
Raman