CSS min-width in IE6, 7, and 8

Question

I found many answers to this question on Google, but none of them seem to work for all browsers.

I am looking for a CSS-only way to get min-width working on Firefox, IE6, IE7, and IE8. It is well-known that IE does not support min-width, so several hacks are out there to try to emulate the behavior of min-width. Unfortunately, I have not had any luck with them.

Specifically, this is what I'm trying to do:

<style type="text/css">
    table.dataTable td {
        white-space: nowrap;
    }

    table.dataTable td.largeCell {
        white-space: normal;
        min-width: 300px;
    }
</style>

<table class="dataTable">
    <tr>
        <td>ID</td>
        <td>Date</td>
        <td>Title</td>
        <td class="largeCell">A large amount of data like a description that could span several lines within this cell.</td>
        <td>Link</td>
</table>

Does anyone have a way to get this to work?

Answer 1

You'll have to adjust your markup, but Brian Huisman's CSS min-height hack has served me well so far in IE 6,7, and (I think) 8.

Answer 2

I use:

min-width: 200px;
_width: 200px; /* IE6 */

Answer 3

So it turns out that the necessary hack for getting min-width to work in all browsers isn't as ugly as many make it out to be.

All I had to do was add CSS for a div within the largeCell and add an empty div at the end of the cell. The div is only 1px tall, so it doesn't really make the cell look larger than it should be.

<style type="text/css">
    table.dataTable td {
        white-space: nowrap;
    }

    table.dataTable td.largeCell {
        white-space: normal;
        min-width: 300px;
    }

    table.dataTable td.largeCell div {
        margin: 0px 0px 0px 0px;
        height: 1px;
        width: 300px;
    }
</style>

<table class="dataTable">
    <tr>
        <td>ID</td>
        <td>Date</td>
        <td>Title</td>
        <td class="largeCell">A large amount of data like a description that could span several lines within this cell.<div></div></td>
        <td>Link</td>
</table>

Answer 4

<style type="text/css">
.table1 th a {
    display:inline-block;
    width:200px";
}
</style>

<table>
    <tr>
        <th><a>title1</a></th>
        <th><a>title2</a></th>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
    </tr>
</table>