CSS Table and Max-Width in Chrome Not Working

CSS table and max-width in Chrome not working

Create a div and give it a styling to display block and a max width. You may use traditional <table> and give it a styling of 100% width.

Chrome, Safari ignoring max-width in table

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.

Max-width in the table

You simply need to set the width to 100% also.

div img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
}

http://jsfiddle.net/samliew/TAE3w/9/

The most consistent effect on all three browsers would be:

div img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

http://jsfiddle.net/samliew/TAE3w/15/

See related questions:

• How do I auto-resize an image to fit a div container
• How do I fit an image (img) inside a div and keep the aspect ratio?

CSS Width:100% not working in Google Chrome

Use display:inline-table for figure and remove width:100% from figcaption.

Here's a FIDDLE working in both Chrome and Firefox.

figure {
    margin: 6px;
    color: #333;
    display: inline-table;  /*changed to inline-table*/
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
     box-sizing: border-box ;
}

figure figcaption {
    background: #E3E3E3;
    padding: 10px 12px 12px;
    color: #333;
    text-align: center;
    font-size: 13px;
    /*  width:100%;   */
    display: table-caption;
    caption-side: bottom;
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
    box-sizing: border-box ;
}

Why does my html table 'max-width' not cause text to wrap?

You need to add the CSS3 property word-wrap: break-word;.

Why is my HTML table not respecting my CSS column width?

You may get more luck with setting widths for your table cells if you apply the rule table-layout: fixed to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.

Table's width not expanding fully on some window resolutions in Chrome

I fixed it by adding display:table; to the #container div.

(It compromises a few things on my site though).

---

Related Topics