web-dev-qa-db-ja.com

オーバーフロー：スクロール; <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仕様から1 、 2、理由がわかりません。

htmlcssscrollhtml-tablecss-tables
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
DrWerenverlivitz