24

CSS プロパティがではoverflow:scroll;うまく機能するのに、なぜ機能しないのですか?<td>overflow:hidden;

<table border="1" style="table-layout:fixed; width:100px">
  <tr>
    <td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

CSS 仕様1、2から、理由がわかりません。

4

4 に答える 4

31

それをdivでラップする必要があります。これは機能します：

<table border="1" style="table-layout:fixed; width:500px">
  <tr>
    <td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>
于 2009-07-31T08:58:23.407 に答える
13

最初に目的の高さを td に指定してから、スクロールバーを表示するそれぞれの「td」に「float: left」プロパティを適用します。

于 2013-01-08T09:38:32.077 に答える
6

私はここから何かを手に入れました！

アンドリュー・フェドニウクは次のように書いています。

これは実際に私の質問です。「技術的な理由の 1 つは、オーバーフロー プロパティがテーブルに適用されないことです。」- どうして？この理由は何ですか？

私は専門家ではありませんが、これは従来のテーブルの動作との下位互換性のためだけだと思います。仕様で「自動」テーブル レイアウト アルゴリズムを確認できます。私は、このレイアウト アルゴリズムがオーバーフロー プロパティと互換性がないことを確信しています (または、より正確には、レイアウト アルゴリズムでは、'visible' 以外のオーバーフローの値が必要になることはありません)。

ええ、これが私が尋ねる理由です。スクロール可能にする、またはスクロール可能にするべきではない正式な理由はないようですが、UA ベンダーはこの分野でいくつかの暗黙の合意に達したようです。質問もそうです。

仕様は、要素に関してあなたに同意します。表のセルはオーバーフローを尊重するはずですが、少なくとも Mozilla はそうしていないようです。この場合、私はあなたの質問に答えることはできませんが、答えはまだレガシーレンダリングに結びついていると思います.

メインスレッドはこちらです。

于 2009-07-31T09:04:22.850 に答える