CSS 寬度和最大寬度組合

Question

我有以下代碼：

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

我認為很明顯我打算讓表格采用可用的全寬，最大尺寸上限為 800 像素。

這適用於 Inte.net Explorer 和 Firefox，但是在 Chrome 中，當width存在時， max-width似乎被忽略了。

我試過使用max-width: 100%; width: 800px; max-width: 100%; width: 800px; ，這在 IE 和 FF 中再次有效，但max-width在 Chrome 中被忽略。 我試過只使用max-width: 800px但在 Chrome 中，表格顯示為 1159 像素寬......！

如果有人可以提供幫助，我們將不勝感激。

Answer 1

加

display: block;

表元素的style屬性（最好是在CSS文件或文檔的<style>部分，而不是在內聯樣式中）。

<div>元素有display: block默認情況下，而<table>元素有display: table; 默認。 您的問題是max-width屬性僅適用於塊元素，因此您必須應用display: block; 到桌子。

Answer 2

使用max-width包含div並使用display: block在Chrome 66上不起作用。但是， table-layout: fixed確實可以： https ： //developer.mozilla.org/en-US/docs/Web/CSS/表格的布局

表和列寬度由table和col元素的寬度或第一行單元格的寬度設置。 后續行中的單元格不會影響列寬。 在“固定”布局方法下，可以在下載和分析第一個表行后呈現整個表。 這可以加快“自動”布局方法的渲染時間，但后續單元格內容可能不適合所提供的列寬。 單元格使用overflow屬性來確定是否剪切任何溢出內容，但僅當表格具有已知寬度時; 否則，它們不會溢出細胞。

Answer 3

將表包裝在具有最大寬度的div中：

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

Answer 4

您可以使用：

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

它適用於IE9和Chrome。

Answer 5

你只是把它倒過來。 它應該是width:800px; max-width:100%; width:800px; max-width:100%; – 當 window 小於 800px 時，這將使布局縮小，而不是試圖將 100% 頁面寬度限制為 800px（這不起作用）。

Answer 6

使用最小寬度：800或您想要並設置寬度：100％。 如果您將設置瀏覽器的大小，但頁面大小不會小於800px