CSS 宽度和最大宽度组合

Question

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 Inte.net 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; 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.

Answer 1

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.

Answer 2

Wrapping in a div with max-width and using display: block don't work on Chrome 66. However, table-layout: fixed does: 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.

Answer 3

Wrap the table in a div that has max width:

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

Answer 4

You can use:

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

It works for me in both IE9 and Chrome.

Answer 5

You just have it backwards. It should be width:800px; max-width:100%; width:800px; max-width:100%; – this will make the layout shrink when the window is smaller than 800px, as opposed to trying to limit the 100% page width to 800px (which doesn't work).

Answer 6

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