CSS width and max-width combined

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

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.