CSS宽度和最大宽度相结合

Question

CSS宽度和最大宽度相结合

我有以下代码:

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

Run Code Online (Sandbox Code Playgroud)

我认为很明显我打算让桌子占用全宽,最大尺寸为800px.

这适用于Internet Explorer和Firefox,但是在Chrome中,似乎存在max-width时width会被忽略.

我尝试过使用max-width: 100%; width: 800px;,它再次在IE和FF中工作,但max-width在Chrome中被忽略.我曾尝试使用,max-width: 800px但在Chrome中,表格的宽度为1159像素而不是......!

如果有人可以提供帮助,我们将不胜感激.

Answer 1

hei*_*erg 40

加

display: block;

Run Code Online (Sandbox Code Playgroud)

表元素的style属性(最好是在CSS文件或<style>文档的部分而不是在内联样式中).

<div>元素具有display: block默认情况下,当<table>元素具有display: table;默认.您的问题是该max-width属性仅适用于块元素,因此您必须应用于display: block;该表.

@Kolink不,它不会对表产生负面影响.Div已经是块样式,您的问题是max-width仅适用于块元素,因此您必须将display:block应用于表. (4认同)
表元素的默认显示类型是"table",CSS将其定义为"块级表:它是参与块格式化上下文的矩形块".这几乎与display:block一样,除了"width"之类的属性(以及"max-width"等).在display:table,min/max-width可以忽略,宽度可以取决于表的内容.使用display:block,无论内容如何,设置宽度或最大宽度都有效.你可能通常*想要*display:block因为这个.当应用于表时,它恰好可以工作. (4认同)
这不会对桌子产生负面影响吗？如果是这样，也许将样式应用于包含“div”的更好？ (2认同)
这里对表本身是正确的(即表的边界具有正确的宽度),但单元格不受影响(基本上它们最终在表外) (2认同)

Answer 2

man*_*roe 5

在div上使用max-width和进行包装display: block不能在Chrome 66上使用。但是，table-layout: fixed可以使用：https : //developer.mozilla.org/en-US/docs/Web/CSS/table-layout

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

归档时间：	13 年，10 月前
查看次数：	86923 次
最近记录：	7 年，4 月前