webdevqa.jp.net

オーバーフロー:スクロール; <td>

なぜ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仕様から12、理由がわかりません。

23
an0

私は何かを得た ここから

Andrew Fedonioukはこう書いている:

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

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

うん、これが私が尋ねている理由です。スクロール可能である、またはスクロールできないはずの正式な理由はないようですが、UAベンダーがこの領域でいくつかのサイレント合意に達したようです。だから問題です。

仕様は要素に関してあなたと一致しています。テーブルセルはオーバーフローを尊重することになっていますが、少なくともMozillaはそうではないようです。この場合、私はあなたの質問に答えることはできませんが、答えは依然としてレガシーレンダリングに関連付けられていると思います。

メインスレッドはこちら

6
Kirtan

あなたはそれを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>
29
Tim Büthe

まずtdに希望の高さを指定し、次にスクロールバーを表示させたいそれぞれの "td"に "float:left"プロパティを適用します。

11
user1885649
<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>
3