CSS 宽度和最大宽度组合
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7936860/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS width and max-width combined
提问by Niet the Dark Absol
I have the following code:
我有以下代码：
<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.
我认为很明显我打算让表格采用可用的全宽，最大尺寸上限为 800 像素。
This works in Internet Explorer and Firefox, however in Chrome it appears that the max-widthis being ignored when widthis present.
这在 Internet Explorer 和 Firefox 中有效，但是在 Chrome 中，它似乎max-width在width存在时被忽略。
I have tried using max-width: 100%; width: 800px;, which again works in IE and FF but the max-widthis ignored in Chrome. I have tried using just max-width: 800pxbut in Chrome the table comes out 1159 pixels wide instead... !
我试过使用max-width: 100%; width: 800px;，它再次在 IE 和 FF 中工作，但max-width在 Chrome 中被忽略。我曾尝试使用，max-width: 800px但在 Chrome 中，表格的宽度为 1159 像素......！
If anyone can help with this, it would be much appreciated.
如果有人可以提供帮助，将不胜感激。
回答by heisenberg
Add
添加
display: block;
to the table element's styleattribute (preferably in a CSS file or the <style>section of the document rather than as in inline style).
到 table 元素的style属性（最好在 CSS 文件或<style>文档的部分中，而不是在行内样式中）。
<div>elements have display: blockby default, while <table>elements have display: table;by default. Your problem is that the max-widthproperty only applies to block elements, so you have to apply display: block;to the table.
<div>元素display: block默认有，而<table>元素display: table;默认有。您的问题是该max-width属性仅适用于块元素，因此您必须应用于display: block;表格。
回答by manroe
Wrapping in a div with max-widthand using display: blockdon't work on Chrome 66. However, table-layout: fixeddoes: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
用 div 包裹max-width并使用display: block在 Chrome 66 上table-layout: fixed不起作用。但是，确实如此：https: //developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths. Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content might not fit in the column widths provided. Cells use the overflow property to determine whether to clip any overflowing content, but only if the table has a known width; otherwise, they won't overflow the cells.
表格和列的宽度由表格和列元素的宽度或单元格第一行的宽度设置。后续行中的单元格不影响列宽。在“固定”布局方法下，一旦下载并分析了第一个表格行，就可以呈现整个表格。这可以加快“自动”布局方法的渲染时间，但随后的单元格内容可能不适合提供的列宽。单元格使用溢出属性来确定是否剪切任何溢出的内容，但前提是表格具有已知宽度；否则，它们不会溢出单元格。
回答by Sevin7
Wrap the table in a div that has max width:
将表格包装在具有最大宽度的 div 中：
<div style="width: 100%; max-width: 600px;">
<table style="width:100%;">
<tr><td></td></tr>
</table>
</div>
回答by Jay
You can use:
您可以使用：
min-width:100%; max-width:800px
It works for me in both IE9 and Chrome.
它在 IE9 和 Chrome 中都适用于我。
回答by Vineet Sharma
Use min-width:800 or you want and set the width:100%. If size of your browser it will set but the size of your page will not be less than the 800px
使用 min-width:800 或你想要的并设置 width:100%。如果您的浏览器的大小将设置但您的页面的大小不会小于 800px
