CSS 宽度和最大宽度组合 [英] CSS width and max-width combined
问题描述
我有以下代码:
我认为很明显我打算让表格采用可用的全宽，最大尺寸上限为 800 像素.
这适用于 Internet Explorer 和 Firefox，但是在 Chrome 中，当 width 存在时，max-width 似乎被忽略了.
我尝试过使用 max-width: 100%;width: 800px;，同样适用于 IE 和 FF，但 max-width 在 Chrome 中被忽略.我试过只使用 max-width: 800px 但在 Chrome 中，表格的宽度为 1159 像素......！
如果有人可以帮助解决这个问题，我们将不胜感激.
解决方案 添加
display: block;
到表格元素的 style 属性(最好在 CSS 文件或文档的 <style> 部分，而不是内联样式).
元素默认有 display: block，而 元素有 display: table; 默认.您的问题是 max-width 属性仅适用于块元素，因此您必须将 display: block; 应用于表格.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.
This works in Internet Explorer and Firefox, however in Chrome it appears that the max-width is being ignored when width is present.
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... !
If anyone can help with this, it would be much appreciated.
解决方案 Add
display: block;
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> 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屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆