Question

我有以下代码：

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

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

此功能适用于Internet Explorer和Firefox，但在Chrome中，max-width出现时会忽略width。

我尝试过使用max-width: 100%; width: 800px;，这又适用于IE和FF，但Chrome中会忽略max-width。我尝试过只使用max-width: 800px，但在Chrome中，该表的宽度为1159像素，而不是......！

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

Answer 1

添加

display: block;

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

默认情况下，

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

Answer 2

使用max-width并使用display: block包裹div并不适用于Chrome 66.但是，table-layout: fixed执行：https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

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

Answer 3

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

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

Answer 4

您可以使用：

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

它适用于IE9和Chrome。

Answer 5

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

CSS宽度和最大宽度相结合

5 个答案: