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

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 开发者_StackOverflow社区than 25% with css or html

use the css table-layout:fixed on the table

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

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.

you can use the max-width style attribute, and set it to 25%.

td{
   max-width:25%;
}

Check this SO thread. It might be useful How to limit a table cell to one line of text using CSS?

Here's some CSS that may help you:

td {
    white-space: nowrap;
    overflow: hidden;
    width: 25%;
    height: 25px;
    border: 1px solid black;
}

table{
    table-layout:fixed; 
    width: 200px;
}