CSS 宽度和最大宽度组合

Posted 2023-03-06

【中文标题】CSS 宽度和最大宽度组合

【英文标题】：CSS width and max-width combined

【发布时间】：2011-12-17 17:19:54

【问题描述】：

我有以下代码：

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

我认为很明显我打算让表格占据可用的全部宽度，最大尺寸上限为 800 像素。

这在 Internet Explorer 和 Firefox 中有效，但在 Chrome 中，当 width 存在时，max-width 似乎被忽略了。

我尝试过使用max-width: 100%; width: 800px;，它在 IE 和 FF 中也可以使用，但在 Chrome 中会忽略 max-width。我试过只使用max-width: 800px，但在 Chrome 中，表格的宽度是 1159 像素...！

如果有人可以提供帮助，将不胜感激。

【问题讨论】：

您正试图将两个相互冲突的事物拼凑在一起。 width: 100% 说占据父容器的整个水平宽度，然后说“不要超过 800px”。这完全取决于 CSS 引擎来确定这两个矛盾的陈述中哪一个具有优先权。

@Marc B：它们并不矛盾。如果浏览器宽度（例如）小于 800 像素，则宽度应扩展到可用空间的 100%。如果浏览器窗口大于 800px，那么它应该只扩展到 800px 宽度（最大）。

* max-width 仅适用于 block 元素 *

【参考方案1】：

添加

display: block;

到 table 元素的 style 属性（最好在 CSS 文件或文档的 <style> 部分中，而不是在内联样式中）。

<div> 元素默认有display: block，而<table> 元素默认有display: table;。您的问题是 max-width 属性仅适用于块元素，因此您必须将 display: block; 应用于表格。

【讨论】：

这不会对桌子产生负面影响吗？如果是这样，也许将样式应用于包含 div 会更好？

@Kolink 不，它不会对表格产生负面影响。 Div 已经是块样式，您的问题是 max-width 仅适用于块元素，因此您必须将 display:block 应用于表格。

表格元素的默认显示类型是“table”，CSS 将其定义为“块级表格：它是参与块格式化上下文的矩形块”。这与 display: block 与“width”等属性的行为方式（以及“max-width”等）几乎相同。在 display: table 中，min/max-width 可以忽略，width 可以以表格内容为准。使用 display: block，设置宽度或最大宽度，无论内容如何。因此，您可能通常想要 display:block。当应用于表格时，它恰好可以工作。

对我不起作用，单元格的内容仍然强制表格大于最大宽度

这里对表格本身是正确的（即表格的边框具有正确的宽度），但单元格不受影响（基本上它们最终在表格之外）

【参考方案2】：

你可以使用：

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

它在 IE9 和 Chrome 中都适用。

【参考方案3】：

将表格包装在具有最大宽度的 div 中：

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

【讨论】：

这没有效果（至少在 Mac Chrome 中）。

【参考方案4】：

使用 min-width:800 或您想要的并设置宽度：100%。如果您的浏览器大小会设置，但您的页面大小不会小于 800px

【参考方案5】：

用max-width 包裹在一个div 中并使用display: block 在Chrome 66 上不起作用。但是，table-layout: fixed 可以：https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

表格和列的宽度由表格和列元素的宽度或第一行单元格的宽度设置。后续行中的单元格不影响列宽。 在“固定”布局方法下，一旦下载并分析了第一行表格，就可以渲染整个表格。与“自动”布局方法相比，这可以加快渲染时间，但随后的单元格内容可能不适合提供的列宽。单元格使用溢出属性来确定是否剪切任何溢出的内容，但前提是表格具有已知宽度；否则，它们不会溢出单元格。