Css Width And Max-width Combined

I have the following code: ... table stuff here ... I think it's obvious I intend for

Solution 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.

Solution 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.

Solution 3:

Wrap the table in a div that has max width:

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

Solution 4:

You can use:

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

It works for me in both IE9 and Chrome.

Solution 5:

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