web-dev-qa-db-ja.com

CSSの幅と最大幅の組み合わせ

私は次のコードを持っています：

<table style="width: 100%; max-width: 800px; table-layout: fixed;">
    ... table stuff here ...
</table>

テーブルが最大幅800pxを上限として、利用可能な全幅を使用するつもりであることは明らかだと思います。

これはInternet ExplorerとFirefoxで機能しますが、Chromeでは、widthが存在するときにmax-widthが無視されているようです。

max-width: 100%; width: 800px;を使用しようとしましたが、これはIEおよびFFで再び機能しますが、Chromeではmax-widthは無視されます。 max-width: 800pxのみを使用してみましたが、Chromeではテーブルが1159ピクセル幅になります...！

誰かがこれを手伝うことができれば、それは大歓迎です。

csshtml-tablewidth
28
Niet the Dark Absol

追加する

display: block;

テーブル要素のstyle属性（CSSファイルまたは<style>インラインスタイルではなく、ドキュメントのセクション）。

<div>要素にはdisplay: blockデフォルトでは、<table>要素にはdisplay: table;デフォルトでは。あなたの問題は、max-widthプロパティはブロック要素にのみ適用されるため、display: block;テーブルに。

40
heisenberg

max-widthでdivをラップし、display: blockを使用すると、Chrome 66では動作しません。ただし、table-layout: fixedは： https：/ /developer.mozilla.org/en-US/docs/Web/CSS/table-layout

テーブルと列の幅は、table要素とcol要素の幅、またはセルの最初の行の幅によって設定されます。後続の行のセルは列幅に影響しません。 「固定」レイアウト方式では、最初のテーブル行がダウンロードおよび分析されると、テーブル全体をレンダリングできます。これにより、「自動」レイアウト方式よりもレンダリング時間を短縮できますが、後続のセルコンテンツが提供された列幅に収まらない場合があります。セルは、オーバーフロープロパティを使用して、オーバーフローコンテンツをクリップするかどうかを決定しますが、これはテーブルの幅が既知の場合のみです。そうしないと、セルがオーバーフローしません。

4
manroe

テーブルを最大幅のdivでラップします。

<div style="width: 100%; max-width: 600px;">
    <table style="width:100%;">
        <tr><td></td></tr>
     </table>
</div>
1
Sevin7

次を使用できます。

min-width:100%; max-width:800px

IE9とChromeの両方で動作します。

0
Jay