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

Question

Summary

What is the best way to provide a table cell cannot be less than a certain minimum width.

Example

I want all the cells in the table to have a width of the table container with a width of at least 100 pixels. If more free space is available, table cells should fill this space.

Browser compatible

Maybe 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 be sufficient:

td { min-width: 100px; } 

However, it does not always comply correctly (min-width attribute) with all browsers (for example, they don’t like IE6).

Edit: As for the IE6 solution (and earlier), as far as I know, no one works reliably under any circumstances. Using the nowrap HTML attribute does not actually provide the desired result, as it simply prevents line breaks in the cell, rather than specifying a minimum width.

However, if nowrap is used in conjunction with a regular mesh width value (e.g. using width: 100px), 100px will act as the minimum width and the cell will still expand with text (due to nowrap). This solution is different from the ideal, which cannot be fully applied using CSS and, as such, would be tedious to implement if you have many tables to which you want to apply this. (Of course, all this alternative solution crashes if you want to have dynamic breaks in cells anyway).

Answer 2

Another hack is the old 1x1 transparent pixel trick. Insert a transparent 1x1 gif image and set its width in the image tag to the desired width. This will make the cell be at least wider than the image.

Answer 3

I know this is an old question, but I thought that I would share something that was not mentioned (although it is quite simple in concept ..) you can just put a <div> inside the table (in one of the <td> or something yet) and set the <div> parameter to min-width . the table will stop at the width of the <div> . Just thought that I would drop it there if someone meets this on google. Also, I'm not so sure about how min-width is handled in I.E6. but this has already been addressed in another answer.

Answer 4

I had success:

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

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

Answer 5

how about this css property

 min-width: 100px 

but it does not work in IE6 if not mistaken

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

 nowrap="nowrap" 

in table data tag

Answer 6

This is a cross-browser way to set the minimum width and / or minimum height:

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

IE 6 does not understand! important
IE 6 sees width / height: 200 pixels (auto rewrite)

Other browsers understand the minimal and important!

I'm not 100% familiar with the width behavior in TD elements, but it all works great, for example in DIV tags

BTW:

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

This does not work due to the order of the first two lines, they should be in the correct order (think about it);)

Answer 7

IE6 treats the width as the minimum width:

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

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