CSS width and max-width combined

by Niet the Dark Absol   Last Updated January 14, 2018 12:26 PM

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.



Answers 4


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.

heisenberg
heisenberg
October 29, 2011 03:42 AM

You can use:

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

It works for me in both IE9 and Chrome.

Jay
Jay
December 13, 2012 18:00 PM

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>
Sevin7
Sevin7
February 01, 2014 12:42 PM

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

Vineet Sharma
Vineet Sharma
March 27, 2015 01:24 AM

Related Questions




Input max-width 100% not working in table

Updated May 09, 2017 23:26 PM

CSS - Calculate table column widths

Updated December 16, 2017 10:26 AM

HTML Fixed Width Table, columns won't resize

Updated April 10, 2017 00:26 AM