40

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • You're trying to slam two conflicting things together. `width: 100%` says to occupy the full horizontal width of the parent container, then saying "Don't go any wider than 800px". It's entirely up to the CSS engine to determine WHICH of those two contradictory statements has precendence. – Marc B Oct 29 '11 at 03:53
  • 24
    @Marc B: They're not contradictory. If the browser width (for example) is less than 800px, then the width should expand to 100% of the available space. If the browser window is greater than 800px, then it should only expand to 800px in width (the maximum). – animuson Oct 29 '11 at 03:56
  • 2
    \* **`max-width` applies only to *block* elements** \* – ashleedawg Feb 20 '19 at 08:30

6 Answers6

54

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
heisenberg
  • 9,665
  • 1
  • 30
  • 38
  • 2
    Wouldn't this negatively affect the table? If so, perhaps it would be better to apply the styles to a containing `div`? – Niet the Dark Absol Oct 29 '11 at 05:02
  • 4
    @Kolink No, it won't negatively affect the table. Div's are already block style, your problem is that max-width only applies to block elements so you have to apply display:block to the table. – heisenberg Oct 29 '11 at 05:08
  • 6
    The default display type for a table element is "table" which CSS defines as "a block-level table: it is a rectangular block that participates in a block formatting context". This is pretty much the same as display: block apart from the way properties like "width" behave (along with "max-width", etc). In display: table, min/max-width may be ignored and width can be subject to the contents of the table. With display: block, setting width or max-width works regardless of contents. You probably usually *want* display:block because of this. And it so happens to work when applied to a table. – thomasrutter Sep 24 '13 at 03:13
  • Doesn't work for me the contents of the cells still force the table to be larger than max-width – Ally Aug 10 '16 at 03:43
  • 2
    Here it is correct for the table itself (i.e. the border of the table has the correct width), but the cells are not affected (basically they end up outside of the table) – BeniBela Aug 27 '16 at 16:18
  • It's worth noting that setting a table to display:block can have a negative effect with some screenreaders. Changing the display from `table` can cause the screenreader to interpret it as a layout table, meaning the data inside the table will not be read out as expected in a tabular form. – Skerrvy Oct 11 '16 at 14:48
  • This causes empty table cells to collapse. – 2540625 Jan 27 '17 at 20:40
  • This solution causes tables of less than 100% width to not "stretch" accross the whole width, which I would assume was the purpose of using `width: 100%` in the first place. – TheThirdMan Jul 31 '17 at 12:25
7

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.

manroe
  • 1,645
  • 20
  • 35
3

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
  • 6,296
  • 4
  • 23
  • 31
0

You can use:

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

It works for me in both IE9 and Chrome.

Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
Jay
  • 25
  • 1
  • 1
0

You just have it backwards. It should be width:800px; max-width:100%; – this will make the layout shrink when the window is smaller than 800px, as opposed to trying to limit the 100% page width to 800px (which doesn't work).

Ivy
  • 1
-1

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
  • 1
  • 1