13

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

最近、誰かがこれらの線のどこかで質問をし、私に疑問を抱かせました。

これを例にとってみましょう。

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

このフィドルでは、幅を確認すると（Chromeの検査要素を使用しています）、100px意図したとおりに機能していることがわかります。

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

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

ご覧のとおり100px、当初の意図どおりではなく、83pxになりました。

しかし、たとえば、より少ないTD（7）に戻り、各TD要素（500px）に広い幅を追加すると、tdの幅がで止まってしまい119pxます。

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

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

これで、テーブルの幅がTDの幅を上書きし、tdの幅をに拡張し222pxます。

誰かがこの振る舞いを説明できますか？

psすべての場合において、要素の検査ツールは、幅が常にcssに対応していることを示していることに注意してください。これは、正しく表示されない最終結果にすぎません。

4

4 に答える 4

31

display:inline-blockTD CSS に追加してみましたか? これにより、ブラウザーは TD 幅を無視しなくなります。

于 2013-02-08T17:29:23.183 に答える
25

この質問に対する答えは次のとおりだと強く信じています。

TD に影響する幅の優先度は次のとおりです。

  1. テーブル幅

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

  3. 要素 (TD) 幅。

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

編集

  1. テーブル幅は常に TD 幅よりも優先されます。

  2. 指定された TD の幅は、ビューポートの幅を超えるまで続き、ビューポートの幅が優先されます。

于 2013-02-13T15:38:16.007 に答える
1

表の幅を指定しない場合、実際には表の幅はセルの幅に依存します。ただし、テーブル幅を指定すると、td 幅は無視されます。次の例を見てください。

<table>
  <tr>
    <td>Column 1</td>
  </tr>
  <tr>
    <td>Column 2</td>
  </tr>
</table>

使用する場合

td { 
  width:500px;
}

テーブルの幅は になります1000px。

しかし、あなたが使用する場合

table {
  width:500px;
} 
td { 
  width:500px;
}

幅は無視さ<td>れ、テーブルの幅は になります500px。

于 2013-02-08T16:00:31.443 に答える
0

w3 Docs Hereによると、「幅の指定がない場合、テーブルの幅はユーザーエージェントによって決定されます」と書かれています。

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

于 2013-02-08T07:54:12.643 に答える