HTML / CSS - how can I make table columns never expand, as I understand it

Question

I have <td width="25%"> , but if it fills with something larger than 25%, it gets larger. how can i stop it from getting over 25% using css or html

Answer 1

use css table-layout:fixed in table

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

Answer 2

You can use max-width: 25%; to prevent exceeding the maximum width; saying that this is a css solution, not an html attribute, so you will need to use:

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

Or, even better, specify in the stylesheet:

 td { max-width: 25%; } 

As @Asherer correctly points out (in the comments), this will not necessarily work in all browsers. To enforce max-width , it might be worth wrapping the contents of td in a div (or, if they are inline elements, span ) and applying max-width to that element.

For instance:

 <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 little messy over time, and I'm usually not a fan of adding unnecessary markup, but in this case it helps cross-browser compatibility.

Answer 3

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

 td{ max-width:25%; } 

Answer 4

Check out this SO stream. May be useful. How to limit a table cell to one line of text using CSS?

Here are some CSS that can help you:

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