Chrome中的CSS表格和最大寬度不起作用

這是我的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有沒有這樣做的原因？

來源

2012-09-02 TM23

創建一個div，並給它一個造型，以顯示塊和最大寬度。你可以使用傳統的<table>，並給它一個100％寬度的樣式。

來源

2012-09-02 04:58:14

從技術上講，Chrome遵循規則，因爲最大寬度只應用於塊元素。

從MSDN文檔：

的最小寬度/最大寬度屬性適用於浮動和絕對定位塊和內聯塊的元件，以及一些固有控件。它們不適用於非替換內聯元素，例如表格行和行/列組。（A「替換爲」元件具有固有尺寸，例如一個img或TEXTAREA。）

表（或在您的情況下的顯示：表）應該在技術上無法工作或支撐。 FF顯然服從它，但您可能需要提出另一種解決方案，或者刪除顯示屏：表或最大寬度。

max-width property

MSDN Doc

來源

2012-09-02 02:48:36 DigTheDoug

正是我需要的，謝謝！顯示錶在Chrome中工作完美:) – TM23

我找到了解決辦法是使用table-layout: fixed和width: 100%

來源

2017-01-16 12:16:04 Iftah

這是我最近做的，但通過這樣做，我需要再次設置寬度。只有讓舊的CSS工作，沒有固定的最小和最大寬度？ – Adrian

Chrome中的CSS表格和最大寬度不起作用

回答

相關問題