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.
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.
You can use:
It works for me in both IE9 and Chrome.
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>
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