CODEWITHSUNDEEP
htmlcssinternet-explorer
Sean Keane
Sean Keane

Reputation: 411

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>

Upvotes: 0

Views: 1714

Answers (3)

user3249235
user3249235

Reputation: 64

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.

Upvotes: 0

code-sushi
code-sushi

Reputation: 719

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.

Upvotes: 0

Mohamed Khamis
Mohamed Khamis

Reputation: 8029

Short answer: Because IE sucks

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

Upvotes: 4

Related Questions