How do I specify in HTML or CSS the absolute minimum width of a table cell

Question

Summary

What's the best way to ensure a table cell cannot be less than a certain minimum width.

Example

I want to ensure that all cells in a table are at least 100px wide regards of the width of the tables container. If there is more available space the table cells should fill that space.

Browser compatibility

I possible I would like to find a solution that works in

• IE 6-8
• FF 2-3
• Safari

In order of preference.

Answer 1

This CSS should suffice:

td { min-width: 100px; }

However, it's not always obeyed correctly (the min-width attribute) by all browsers (for example, IE6 dislikes it a great deal).

Edit: As for an IE6 (and before) solution, there isn't one that works reliably under all circumstances, as far as I know. Using the nowrap HTML attribute doesn't really achieve the desired result, as that just prevents line-breaks in the cell, rather than specifying a minimum width.

However, if nowrap is used in conjunction with a regular cell width property (such as using width: 100px), the 100px will act like a minimum width and the cell will still expand with the text (due to the nowrap). This is a less-than-ideal solution, which cannot be fully applied using CSS and, as such, would be tedious to implement if you have many tables you wish to apply this to. (Of course, this entire alternative solution falls down if you want to have dynamic line-breaks in your cells, anyway).

Answer 2

Another hack is the old 1x1 transparent pixel trick. Insert an 1x1 transparent gif image and set its width in the image tag to the width you want. This will force the cell to be at least as wide as the image.

Answer 3

I know this is an old question but i thought I'd share something that wasn't mentioned (Although pretty simple in concept..) you can just put a <div> inside the table (in one of the <td>'s or something) and set the <div> to min-width. the table will stop at the <div>'s width. Just thought I'd throw that out there in case somebody comes across this on google. Also, I'm not so sure about how min-width is handled in I.E6. but that has already been covered in another answer.

Answer 4

I had some success with:

    min-width: 193px;
    width:auto !important; 
    _width: 193px;  /* IE6 hack */

Based on a combination of Vatos' response and a min-height article here: http://www.dustindiaz.com/min-height-fast-hack/

Answer 5

what about this css property

min-width: 100px

but it doesn't really work in IE6 if not mistaken

if you don't want to do it in the css way, I suppose you can add this attribute

nowrap="nowrap"

in your table data tag

Answer 6

This is a cross-browser way for setting minimum width and/or mimimum height:

{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}

IE 6 doesn't understand !important
IE 6 sees width/height:200px (overwriting auto)

Other browsers understand the min- and the !important

I am not 100% familiar with the behaviour of widths in TD elements, but this all works nicely on eg DIV tags

BTW:

Based on a combination of Vatos' response and a min-height article here: http://www.dustindiaz.com/min-height-fast-hack/

This is not working because of the order of the first 2 lines, they need to be in the right order (think about the above) ;)

Answer 7

IE6 handles width as min-width:

td {
    min-width: 100px;
    _width: 100px;/* IE6 hack */
}

If you want IE6 to handle width like normal browsers, give it an overflow:visible; (not the case here)