html - 子要素の幅を親要素よりも大きくすることはできますか?

Question

HTML コントロール (例: テーブル) の幅が親 (例: div) よりも大きく、内部コントロールが完全に表示される可能性があるかどうかに興味がありますか? ありがとう

Answer 1

それは絶対に可能です。要素のoverflowcss プロパティを次のように設定できます。parentvisible

.parent {
    # Other Properties
    overflow : visible;
}

この場合、子要素の幅がその親の幅よりも大きい場合、それは表示されます。overflow高さと幅の両方で機能します。高さまたは幅のみを表示するには、overflow-xandoverflow-yプロパティを使用できます (名前は x 軸と y 軸に基づいています)。

この動作中の JSFiddle を試してください

アップデート：

注: @cimmanonoverflowが述べたように、プロパティのデフォルト値は に設定されてvisibleいるため、上記のように明示的に設定する必要はありません。ただし、私の個人的な好みは、確実にしたい場合に備えて明示的に設定することです。

Answer 2

width子のサイズがパーセンテージまたは自動にposition設定され、静的または相対に設定されている場合、子のサイズはその親要素に適応します。したがって、大きくしたい場合は、次のことを行うことができます。

1. 子要素を親よりも大きくします (幅またはマージンのいずれかを介して)
2. 絶対配置を使用する
3. 子要素の子孫を折り返さないでください (テーブルはここに収まります)

祖先要素を変更して、物事を隠す (非表示にする) オーバーフローを持たない限り、子孫は透けて見えます。