Internet Explorer 8 ignoring colgroup widths on table

For some odd reason IE is ignoring my column widths and just setting all six columns to equal widths.

table{
table-layout: fixed;
} 

<colgroup>
        <col style="width: 15%;" />
        <col style="width: 40%;"/>
        <col style="width: 5%;" />
        <col style="width: 10%;" />
        <col style="width: 10%;" />
        <col style="width: 20%;" />
    </colgroup>

Answers


Short answer: Because IE sucks

Long answer: Use <table>, <tr> and <td> instead. And use the colspan attribute to achieve the same effect.


Sean you can use the <td> tag for styling your various widths, correct, but I don't see any issues with the code you are using now, provided the <colgroup> designation is placed in the proper placement relative to the <table> tag as follows:

<table style="border:1px solid #000; table-layout:fixed;">
  <colgroup>
     <col style="width: 25%;" />
     <col style="width: 65%;" />
     <col style="width: 10%;" />
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

IE 8 apparently doesn't play nicely with jsfiddle, so I dumped the code into one of those W3C sandboxes to test. Just go to that link in IE 8 and replace their colgroup section with what I have above, and hit the "submit code" button to view results.


Although you may already have come across this site and this note regarding IE8, those should be very helpful if you review them again in detail.

IE8 is relatively incompatible web browser when it comes to parsing CSS.

This limitation in IE8 becomes woefully salient when anyone tries to do sizing of any kind, be it windowing or table-sizing.

As indicated in one of the web-sites I mentioned above, you could try to complement IE8 with JavaScript instead of relying heavily on HTML and CSS only.


Need Your Help

The most logical way to order up-votes and down-votes and how to do it

php mysql sql database

In my database I have a number of up-votes and a number of down-votes for each row in the table and they represent some kind of calification for that item.

Zend Framework group by case

php mysql sql zend-framework

I having trouble using zend framework mysql groupby query. What I am trying to achieve is this query