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).