Internet Explorer 8 ignoring colgroup widths on table

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>

That's a statement not a question. I assume the question is how to fix it. — bjb568, Jan 29 '14 at 22:25
Not new, just have to get it working in IE 8. My entire user base is still stuck on IE 8 for the moment. And yes the question is how to fix it. Any ideas? — Sean Keane, Jan 29 '14 at 22:40

score 4 · Answer 1 · answered Jan 29 '14 at 23:29

4

Short answer: Because IE sucks

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

answered Jan 29 '14 at 23:29

Mohamed Khamis

7,731
10
38
58

So your recommending that I set the widths on the td? – Sean Keane Jan 29 '14 at 23:48
Yup, I am not sure why exactly `colgroup` and `col` are not working, I know they are not popular though, maybe because they don't work as expected on all browsers.. – Mohamed Khamis Jan 30 '14 at 07:34

score 0 · Answer 2 · answered Jan 30 '14 at 00:44

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.

score 0 · Answer 3 · edited May 23 '17 at 12:02

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.

Internet Explorer 8 ignoring colgroup widths on table

3 Answers3