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 ta

Answer 1

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 2

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 3

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 4

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 5

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 6

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)