Internet Explorer 8忽略表上的colgroup宽度

Question

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>

Answer 1

Short answer: Because IE sucks

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

Answer 2

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.

Answer 3

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.