CSS width and max-width combined

css html-table width
Niet the Dark Absol picture Niet the Dark Absol · Oct 29, 2011 · Viewed 97.7k times · Source

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

heisenberg picture heisenberg · Oct 29, 2011

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.

Related questions

How to set up fixed width for <td>?

Simple scheme: <tr class="something"> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> I need …

Read More
td widths, not working?

So I have this code here: <table> <tr> <td width="200px" valign="top"> <div class="left_menu"> <div class="menu_item"> <a href="#">Home</a> </…

Read More
How to get the <td> in HTML tables to fit content, and let a specific <td> fill in the rest

This is a hypothetical example: I want to have every single column's width to fit its content size, and leave the rest of the space for the one column with the "absorbing-column" class, so that it looks like this: | HTML | 100% | …

Read More