HTML/CSS - how can I make my table columns never go wider what i speficy as width

Question

I have <td width="25%"> but if it gets populated with something thats largers than 25% it gets bigger. how can I stop it from getting bigger than 25% with css or html

Answer 1

use the css table-layout:fixed on the table

Found here: http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout

Answer 2

You can use max-width: 25%; to prevent the maximum width from being exceeded; having said that this is a css solution, rather than an html-attribute, so you'd have to use:

<td style="max-width: 25%;">...</td>

Or, better yet, specify in the stylesheet:

td {
    max-width: 25%;
}

As @Asherer correctly notes (in the comments) this won't necessarily work in all browsers. To enforce the max-width it might be worth wrapping the contents of the td in a div (or, if they're in-line elements, a span) and applying the max-width to that element.

For example:

<td>
    <div>
        Cell contents
    </div>
</td>

td {
    width: 25%;
    max-width: 25%;
}

td div {
    width: 100%;
    overflow: hidden; /* or 'auto', or 'scroll' */
}

This can get a bit messy over time, and I'm not usually a fan of adding unnecessary mark-up, but in this case it does aid the cross-browser compatibility.