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

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 3

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 4

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)

Answer 5

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/