Why won't my table column respect a max-width of 50%?

Question

I am trying to get a table column to expand to fill its contents, up until it's taking 50% (or any arbitrary %) of the width of the whole table. I've set every cell in the column, including the header, to have max-width: 50%; in its css style.I've verified that the rule isn't being overridden by another max-width.

Fixed pixel amounts for max-width work fine. Only percents seem to be failing to take effect.

I've tried simplifying it to a reproducable example to see if some other obscure layout or css quirk is causing the problem, and I'm still able to reproduce it.

JSFiddle: http://jsfiddle.net/8Lmtvzur/1/

HTML:

<table class="data">
    <thead>
        <tr>
            <th>Entry Header 1</th>
            <th>Entry Header 2</th>
            <th>Entry Header 3</th>
            <th class="asdf">Entry Header 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Entry First Line 1</td>
            <td>Duis sollicitudin ipsum diam, cursus tristique lorem placerat.</td>
            <td>Entry First Line 3</td>
            <td class="asdf">Entry First Line 4</td>
        </tr>
        <tr>
            <td>Entry Line 1</td>
            <td>Duis sollicitudin ipsum diam, cursus tristique lorem placerat.</td>
            <td>Entry Line 3</td>
            <td class="asdf">Entry Line 4</td>
        </tr>
        <tr>
            <td>07/07/2014 11:51 am</td>
            <td>Duis sollicitudin ipsum diam, cursus tristique lorem placerat.</td>
            <td>Entry Last Line 3</td>
            <td class="asdf">
                Nullam consectetur pretium tristique. Vestibulum facilisis dapibus vulputate. Sed et arcu ac arcu pretium porttitor. Nullam quis ante.<br/>
                <br/>
                Donec at condimentum nunc. Maecenas in arcu ligula. Etiam dictum metus massa, eu dignissim nibh tempor a. Maecenas.<br/>
                <br/>
                Donec ac turpis felis. Sed blandit dignissim convallis. In hac habitasse platea dictumst. Pellentesque pretium, sem ac pellentesque gravida, velit erat semper nisi, placerat posuere dui augue non nunc. Curabitur id augue at turpis vestibulum suscipit. Suspendisse lacinia imperdiet metus sit amet lobortis. Proin nec mi lectus. Nam rutrum maximus felis quis congue. Vivamus nec augue felis.
            </td>
        </tr>
        <tr>
            <td>03/18/2015 11:05 am</td>
            <td></td>
            <td>blah</td>
            <td>testing 1 2 3 <br/>
                4 56</td>
        </tr>
    </tbody>
</table>

CSS:

table {
    border-spacing: 0;
    border-collapse: collapse;
}

table tr td, table tr th {
    font-size: 10.6667px;
    font-family: Osaka, verdana, sans-serif;
    vertical-align: top;
    border: 1px #DDDDDD solid;
    padding: 2px;
}

td.asdf, th.asdf {
    max-width: 10%;
}

max-* and min-* may not always work with table layout, you can google "max width table cell" and see, however can't you use width: 10% instead? — Stickers, Sep 29 '15 at 22:21

score 0 · Accepted Answer · answered Sep 29 '15 at 22:28

Try using width instead:

http://jsfiddle.net/gd77gxcc/

max-width is not defined in the current standards for table elements so it can't be relied upon:

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/CSS21/visudet.html#propdef-max-width

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.

https://developer.mozilla.org/en/docs/Web/CSS/max-width

Why won't my table column respect a max-width of 50%?

1 Answers1