web-dev-qa-db-ja.com

CSSテーブルと最大幅Chromeが機能していません

これは私のCSSコードです。

#wrap {
    width:50em;
    max-width: 94%;
    margin: 0 auto;
    background-color:#fff;  
}

#head {
    width:50em;
    height:10em;
    max-width: 100%;
    margin: 0 auto;
    text-align:center;
    position: relative;
}

#css-table { 
    display: table; 
    margin: 1em auto;
    position: relative;
    width:50em;
    max-width: 100%;            
}

#css-table .col { 
    display: table-cell; 
    width: 20em;
    padding: 0px;
    margin: 0 auto;
}

#css-table .col:nth-child(even) { 
    background: #fff;
}

#css-table .col:nth-child(odd) { 
    background: #fff;
    border-right: 4px double #b5b5b5;
}

そして、私のHTMLコード。

<div id="cont">
    <div id="css-table">
        <div class="col">123</div>
        <div class="col">123</div>
    </div>
</div>

Firefoxウィンドウを拡大縮小すると、テーブルは300px幅のビューポートにまで縮小されます。ただしChromeでは、ビューポートが50emより広い場合にのみ、テーブルが正常に見えます。 Chrome=ウィンドウを狭くすると、ラップの右側からテーブルがにじみます。

Chromeこれを行う理由はありますか？

cssgoogle-chromefirefoxcss-tables
16
TM23

Divを作成し、表示ブロックのスタイルと最大幅を指定します。従来の<table>を使用して、100％幅のスタイルを設定できます。

5
blasteralfred Ψ

技術的にはChromeはルールに従いますmax-widthはブロック要素にのみ適用する必要があるためです。

MSDNドキュメントから：

Min-width/max-width属性は、一部の組み込みコントロールだけでなく、フローティングおよび絶対配置のブロックおよびインラインブロック要素に適用されます。これらは、テーブルの行や行/列グループなど、置換されていないインライン要素には適用されません。 （「置き換えられた」要素には、imgやtextAreaなどの固有の寸法があります。）

テーブル（または、場合によってはdisplay：table）は、技術的に機能しないか、サポートされません。 FFは明らかにそれに従っていますが、おそらくdisplay：tableまたはmax-width。

最大幅プロパティ

MSDNドキュメント

21
DigTheDoug

私が見つけた解決策はtable-layout: fixedおよびwidth: 100%

11
Iftah

私は問題を修正するためにミックスイン（SASS）を使用することができました。

 @mixin clearfix {
   &::after{
    content: "";
    display: table;
    clear: both;
   }
 }
0
monkeyshoulders