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