Min-Width in Msie 6

Min-width in MSIE 6

foo { min-width: 100px }      // for everyone
* html foo { width: 100px }   // just for IE

(or serve a separate stylesheet to IE using conditional comments)

min-width and max-width with jQuery

to emulate max-width:

var maxWidth = 300;    
if ( $('SELECTOR').width() > maxWidth ) $('SELECTOR').width(maxWidth);

the same can be applied for width, height, min and max with minor adjustments.

CSS min-width in IE6, 7, and 8

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>

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

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

Issue with box-sizing border-box and min-width in IE 9

Hi came across your post when Googling for a similar issue with IE 8, although IE 8 supports box-sizing and min-height/width, from my tests, it seems IE 8 ignores border-box when using min-height/width on the same element

E.g.

#box {
   min-height: 20px;
   padding:4px;
   box-sizing:border-box;
}

IE 8 height = 28px, Chrome 20 height = 20px;

Solution using css browser selectors http://rafael.adm.br/css_browser_selector/

#box {
       min-height: 20px;
       padding:4px;
       box-sizing:border-box;
  }

 .ie8 #box, .ie9 #box {
       min-height: 12px;
       padding:4px;

 }

How to make IE support min-width / max-width CSS properties?

If what you are saying is true, IE9 would be deviating form the spec. However, I cannot duplicate your complaint. Using your example, IE9 respects min-width if width is less than 150px per this jsfiddle.

EDIT:

NOTE: Quirks Mode follow different rules and does not comply with standard CSS in any browser. If you add a doctype to the page, this should resolve the problem (add: <!DOCTYPE html>).

To expand on the issue, Quirks Mode is not standardized. There are some things that most browser implement, but new features are undefined in those defacto standards. Thus, some browsers are allowing new CSS to be used (as you have observed), but IE9 is ignoring new css values, as they have no place in Quirks Mode.

max-width not working for IE 11

I think your problem is not coming from max-width but from main element...

The main element is not fully supported by IE11 (source).

2 solutions :

Change your <main> element to a <div>. Demo : http://jsfiddle.net/z4s01yxz/2/
Add main { display: block; } to your CSS. Demo : http://jsfiddle.net/z4s01yxz/1/

Min-Width in Msie 6