1

My problem is quite easily demonstrated:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<table border="1">
    <colgroup>
        <col width="75">
        <col width="75">
        <col width="75">
        <col width="75">
    </colgroup>
    <tr>
        <td colspan="2">Cells 1 + 2</td>
        <td colspan="2">Cells 3 + 4</td>
    </tr>
</table>
</body>
</html>

While Firefox (15.0.1) creates a table with two cell's, each 150 pixels...

Result in Firefix

... Internet Explorer (9.0.8112.16421) uses only col three for the width:

Result in IE

As soon as the table contains a row with a cell in the fourth column that does not span over another one, the width definitions work as expected.

I guess that IE things to itself "oh, well, there is no other colum behind the third one - let's ignore the col definition". But I have no idea how to avoid this problem. Any suggestions? And, of course, explanations that go beyond tele-introspection are welcome as well :)

To avoid discussions regarding this example's sense: The columns are defined automatically by a function that does not know if the latter cells will be used separately (at least once) or not.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
BurninLeo
  • 4,240
  • 4
  • 39
  • 56
  • Would you be happy with creating a row of empty cells? If so what do you think of this? http://jsfiddle.net/KqHq6/1/ – tw16 Sep 21 '12 at 20:20
  • It's a table used for layout purposes (and yes: It's actually table content to show there...). A "blank line" created by the empty cells would spoil the layout. And if I hide the row with display: none; we're back at the original result :( – BurninLeo Sep 21 '12 at 20:32
  • Yup, that's why I tried to make it as small as possible. I was hoping that whatever layout you were using could accommodate a tiny gap at the beginning. What about a tiny gap at the end instead? You could use the last row instead and target it with a class for easy cross browser compatibility? – tw16 Sep 21 '12 at 20:41
  • I will use this as ultima ratio if nothing else does help. But things are a bit more weired: This is part of a CMS and users are free to alter the CSS. So if someone chooses to have border-lines between the rows, the cheat becomes obvious... – BurninLeo Sep 21 '12 at 21:00
  • Should I put my suggestion down as an answer? Or did you find another solution? – tw16 Sep 24 '12 at 14:36
  • Well, I do not think that adding an empty line is actually an answer. It will hinder screen readers, trouble the layout, and it is not really a solution but simply shifts the problem. Actually I still hope that someone brings up a solution that's a bit closer to the source of the problem... No offence indended. I simply cannot imagine that this XXL bug has not annoyed anyone else, yet?!? – BurninLeo Sep 24 '12 at 18:55
  • PS: Until I find a sufficient solution, I have added some lines of code into my PHP script that check the table for not having a unspanned last cell in any row and - in that case - reduces spanning from each last cell until there is a single cell in one line... That workaround, of cource, does not mean I am still very interested in a real solution. – BurninLeo Sep 24 '12 at 18:59

1 Answers1

0

Set a width for the TABLE itself.

<table border="1" width="300">
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • In IE this creates a table with the same 2:1 relation but broader. Further, I have a colunm of undefined size (fills space to 100%) in the original code. – BurninLeo Sep 21 '12 at 20:28