CSS宽度和最大宽度组合 [英] CSS width and max-width combined

问题描述

我有以下代码：

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

我认为很明显，我打算让表格获取完整的宽度，

I think it's obvious I intend for the table to take the full width available, with a capped maximum size of 800px.

这适用于Internet Explorer和Firefox，但在Chrome中，显示 max-width width 存在时被忽略。

This works in Internet Explorer and Firefox, however in Chrome it appears that the max-width is being ignored when width is present.

我尝试使用 max-width：100 ％; width：800px; ，它也可以在IE和FF中使用，但在Chrome中会忽略 max-width 。我尝试使用 max-width：800px 但在Chrome中的表出现1159像素宽，而是... WTF？！？

I have tried using max-width: 100%; width: 800px;, which again works in IE and FF but the max-width is ignored in Chrome. I have tried using just max-width: 800px but in Chrome the table comes out 1159 pixels wide instead... WTF?!?

如果任何人都可以帮助这一点，这将是非常感谢。谢谢。

If anyone can help with this, it would be much appreciated. Thank you.

推荐答案

添加

display: block;

添加到表元素的 style 在CSS文件或文档的< style> 部分，而不是内联样式）。

to the table element's style attribute (preferably in a CSS file or the <style> section of the document rather than as in inline style).

< div> 元素默认为 display：block ，< table& / code>元素默认情况下具有 display：table; 。您的问题是 max-width 属性仅适用于块元素，因此您必须应用 display：block; 到表。

<div> elements have display: block by default, while <table> elements have display: table; by default. Your problem is that the max-width property only applies to block elements, so you have to apply display: block; to the table.

这篇关于CSS宽度和最大宽度组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！