Using colspan and cell widths in Internet Explorer

Forum Moderators: open

Message Too Old, No Replies

Using colspan and cell widths in Internet Explorer

pforth

2:47 pm on Feb 16, 2008 (gmt 0)

When I use rowspan in a table, the width values for subsequent table columns appear to be ignored in ie. It just spaces things out evenly underneath the table cell with the rowspan set.


<body>
<table border=1><tr>
 <td colspan=3>3 long columnlong columnlong column</td>
</tr><tr>
 <td width=15 style="width:15px;">1</td>
 <td width=15 style="width:15px;">2</td>
 <td>3</td>
</tr></table>
</body>
</html>

In Firefox it looks something like this:


-------------------------------------- 
Ś3 long columnlong columnlong column Ś 
-------------------------------------- 
Ś1Ś2Ś3...............................Ś 
--------------------------------------

Great! But In IE it looks like this:


-------------------------------------- 
Ś3 long columnlong columnlong column Ś 
-------------------------------------- 
Ś1..........Ś2...........Ś3..........Ś 
--------------------------------------

It ignores both the width setting and the width style!

rocknbil

5:31 pm on Feb 16, 2008 (gmt 0)

I'm sure you mean colspan. Yeah, that's the deal with tables. :-) Apply a width to the third column. If it's supposed to be a variable width, make it something like 95%. It also helps to quote all attributes, use a valid doctype [webmasterworld.com] to avoid quirks mode, and validate your code [validator.w3.org].

pforth

12:16 am on Feb 17, 2008 (gmt 0)

Definately meant colspan NOT rowspan (the code is right, the descriptive text is wrong).

Your suggestion (adding 95%) works...but I had greatly simplified the table to show the principle of what I needed. In actual fact I have more than 3 columns... like so:


<body>
<table border=1><tr>
<td colspan=3>3 long columnlong columnlong column</td>
<td>a bunch of stuff</td>
<td>and more stuff</td>
</tr><tr>
<td width=15 style="width:15px;">1</td>
<td width=15 style="width:15px;">2</td>
<td width="95%">3</td>
<td>and more stuff</td>
<td>and more stuff</td>
</tr></table>
</body>
</html>

With the suggestion implimented as I did above I get something like this:


--------------------------------------------------------- 
Ś3 long columnlong columnlong column.........Śa....Śand..Ś 
Ś............................................ŚbunchŚmore.Ś 
Ś............................................Śof...ŚstuffŚ 
Ś............................................ŚstuffŚ.....Ś 
---------------------------------------------------------- 
Ś1Ś2Ś3.......................................Śand..Śand..Ś 
Ś............................................Śmore.Śmore.Ś 
Ś............................................ŚstuffŚstuffŚ 
----------------------------------------------------------

See how the extra columns are all squished. I want to see something more like this:


--------------------------------------------------------------------- 
Ś3 long columnlong columnlong columnŚa bunch of stuffŚand more stuffŚ 
--------------------------------------------------------------------- 
Ś1Ś2Ś3..............................Śand more stuff..Śand more stuffŚ 
---------------------------------------------------------------------

This layout is dead simple to get in firefox...it seems to be impossible in IE.

I have also tried an approach using a nested table for the 1,2,3 instead of the colspan shown above. This works ok BUT in my app the 1,2,3 have repeating background images that need to be the entire height of the row. There doesn't appear to be a way to make the nested table take up the entire height of the row in either ie or firefox. This means that it works great...unless there is enough text in one of the other columns to make the row have multiple lines.