Chrome, Safari ignoring max-width in table

Question

I've got HTML code like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
    <title></title> 
    </head> 

    <body> 
       <table style="width:100%;"> 
          <tr> 
             <td> 
                <table style="width:100%; max-width:1000px; background:#000099;"> 
                       <tr> 
                           <td> 
                               001 
                           </td> 
                       </tr> 
                   </table> 
               </td> 
           </tr> 
       </table> 
    </body> 
    </html>

The problem is that Chrome and Safari are ignoring "max-width:1000px" My friend has found that we can prevent it by adding "display:block" for the inner table, and it's somehow working.

So, what I want to know is - are there any other ways of solving this problem and why is this happening?

It just got fixed and broke our site – iamareebjamal Sep 09 '19 at 13:03 — iamareebjamal, Sep 09 '19 at 13:03

Jason · Accepted Answer · 2017-05-31T21:47:46.703

88

Max-width applies to block elements. <table> is neither block nor inline. Ambiguous enough? haha. You can use display:block; max-width:1000px and forget about width:100%. Chrome and Safari follow the rules!

Edit May 2017: please note, this comment was made 7 years ago (in 2010!). I suspect browsers have changed a bunch over the years (I wouldn't know, I no longer do web design). I recommend using a more recent solution.

edited May 31 '17 at 21:47

answered Oct 26 '10 at 00:04

Jason

3,357
1
22
29

1

Thanks, that helped me, but is there any source that is more competent than Wiki? I tried to find, but couldn't, would appreciate a lot. – GaGar1n Oct 26 '10 at 03:21
3

The standards of the elements and such. Sorry, Wiki is good for a brief look. http://www.w3.org/2009/cheatsheet or just w3.org altogether. – Jason Oct 26 '10 at 04:07
1

Thanks, didn't know max width was only for blocks. I wish all browsers rendered pages the same!! – TheGateKeeper May 09 '12 at 13:42
10

Fiddling with table elements `display` property seems to be popular advice here at Stack Overflow. If you do so, don't forget it'll no longer be a real table—expect to see all kind of side effects. – Álvaro González Oct 17 '13 at 08:39
"In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined." http://www.w3.org/TR/CSS2/visudet.html#propdef-max-width – Sean the Bean Oct 21 '13 at 18:24
@ÁlvaroG.Vicario, with the side-effects being what? – Robert Siemer Jul 13 '14 at 12:10
6

@RobertSiemer - Headers and footers not rendering at the correct position, column misalignments... Everything related to table specific behaviours. – Álvaro González Jul 13 '14 at 13:19
@ÁlvaroG.Vicario I was trying to provoke this, but can’t. You have an example page by chance? – Robert Siemer Jul 13 '14 at 15:42
This causes empty table cells to collapse. – 2540625 Jan 27 '17 at 20:43
@Jason re May 2017 edit. Your original answer may still apply to some iOS Safari versions. Certainly I found that at least one of `display: block` and a declared `DOCTYPE` of at least HTML4 was required to get `max-width: 100%` to be respected (both are required in Safari 5.1.7 on Windows). (I don't have a Mac or iOS device, or a paid account on BrowserStack, so am not easily able to test definitively. Your original answer has helped solve a problem in 2023 on an iPhone I don't have. +1.) – Jake Feb 02 '23 at 01:37

score 32 · Answer 2 · edited Jan 20 '13 at 01:27

32

I know this has been answered for a while and with a working workaround, but the answer stating that max-width only applies to block elements and citing a source that's not the spec is completely incorrect.

The spec (the CSS 3 spec for CSS Intrinsic & Extrinsic Sizing refers to the CSS 2.1 spec on this rule) clearly states:

all elements but non-replaced inline elements, table rows, and row groups

which would mean it should apply to table elements.

It means that WebKit's behavior of not honoring max-width or min-width on table elements is incorrect.

edited Jan 20 '13 at 01:27

Bohemian

412,405
93
575
722

answered Jan 20 '13 at 01:07

dustinwilson

485
4
8

2

The referenced spec also says about 10 lines later `In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.` It appears to be rather ambiguous, to me anyway. – Matt Mar 07 '16 at 22:31
@Matt Yeah, if you notice it leaves out table rows and row groups in that listing. It just means that the spec doesn't try to specify how it's supposed to behave when applied to table elements. It still does apply. Prior to Opera 15 Opera supported min-width, et al on tables. – dustinwilson Mar 08 '16 at 23:09

Serj Sagan · Answer 3 · 2017-08-09T00:43:42.867

28

I think what you're looking for here is:

table-layout: fixed

Apply this style to the table and your table will respect the width you assign to it.

Note: Applying this style directly in Chrome will look like it is not working. You need to apply the style in your CSS / HTML file and refresh the page.

edited Aug 09 '17 at 00:43

answered Jul 10 '14 at 00:31

Serj Sagan

28,927
17
154
183

1

Oh wow. Didn't know that Chrome ignored that - one of the first things I tried. I've been busy solving this motha** for the past three hours.. – Aart den Braber Apr 03 '15 at 13:52

score 8 · Answer 4 · answered Apr 20 '12 at 08:55

8

Wrap inner table with div and set max-width to this wrapping div.

answered Apr 20 '12 at 08:55

Jan Mazánek

89
1
1

1

As above, this workaround works because `
` tags and `
` tags are naturally displayed block-style.
– Michael Durrant Jun 21 '12 at 13:18

score 6 · Answer 5 · edited Jun 21 '12 at 13:58

6

I had the same issue. I used a table as a means to center my content on the page, but safari ignored width:100%; max-width:1200px as a style I applied to the table. I learned that if I wrap the table in a div and set left and right margins on auto on the div, it would center on the page and obey the max and min width attributes in safari and firefox on the mac. I have yet to check explorer or chrome on windows. Here is an example:

<div style="position:relative; width:100%; max-width:1200px; min-width:800px; margin-left:auto; margin-right:auto">

Then I nested the table inside the div...

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

edited Jun 21 '12 at 13:58

moribvndvs

42,191
11
135
149

answered Jun 21 '12 at 13:09

Cliff

69
1
2

3

This workaround works because `
` tags and `
` tags are naturally displayed block-style.
– Michael Durrant Jun 21 '12 at 13:17
if i dont want to set the max-width but only the min-width for the div, the table becomes 100% width of the screen, which is way too big. Any idea on how should i solve this? – Meow Feb 19 '14 at 16:41
No effect in Mac Chrome. – 2540625 Jan 27 '17 at 20:47

score 1 · Answer 6 · answered Feb 20 '15 at 12:24

I just came across this answer and it is worth noting that according to MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/max-width), their compatibility table for max-width says:

|             Feature  | Chrome        | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
--------------------------------------------------------------------------------------------------------
|applies to <table> [1]| Not supported | (Yes)           | Not supported     | (Yes) | Not supported   |

"[1] CSS 2.1 explicitly leaves the behavior of max-width with undefined. Therefore any behavior is CSS2.1-compliant; newer CSS specifications may define this behavior, so Web developers shouldn't rely on a specific one now."

There is some cool stuff on MDN though such as "fill-available" and "fit-content" - we have some things to look forward to when the spec stabilises and is explicit on this front...

score 1 · Answer 7 · answered Feb 09 '16 at 15:42

Here is an unambiguous reference: 10 Visual formatting model details (w3.org)

In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.

References given previously in this thread, erroneously read “table rows” as “table”. This one however, really says “table”. That's part of CSS2, but CSS3 refers to CSS2 for the basis of max-width.

So it's just undefined and browser are free to do what they wish and it's unsafe to rely on it.

score 0 · Answer 8 · edited Oct 22 '13 at 18:45

0

I was able to fix my problem with media query:

I replaced

max-width: 360px

with

@media (min-width: 440px) {
    width: 360px;
}

edited Oct 22 '13 at 18:45

Matthew R.

4,332
1
24
39

answered Oct 22 '13 at 18:20

user2908392

1

This has no effect (Mac Chrome). – 2540625 Jan 27 '17 at 20:45

Chrome, Safari ignoring max-width in table

8 Answers8

Linked