Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS min-width in IE6, 7, and 8

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>
  </tr>
</table>

Does anyone have a way to get this to work?

like image 699
Aaron Avatar asked Mar 01 '10 14:03

Aaron


People also ask

What is the use of min width in CSS?

The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width .

What is width min content?

According to the W3C specifications, the min-content is the smallest size a box can take without overflowing its content. For horizontal content, the min-content uses the length of the widest bit of content in the element box and automatically sets that length value as the box width.


2 Answers

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>
  </tr>
</table>
like image 157
Aaron Avatar answered Sep 23 '22 01:09

Aaron


I use:

min-width: 200px;
_width: 200px; /* IE6 */
like image 36
fire Avatar answered Sep 24 '22 01:09

fire