Jump to content

table colgroup problem in IE 6


slick_road_runner
 Share

Recommended Posts

Hello, I have a table in which I'm using the colgroup elements to specify column widths. I'm finding that in IE 6 for some reason the rendered columns do not have the proper widths. Note that some of the rows have a cell that spans multiple columns, and I've found that when those rows (with cells that span multiple columns) are removed, the rendered columns *do* take on the proper widths as specified in their respective colgroup, so it looks like the spanning cells have something to do with the problem. Any idea how to fix this, e.g. any tag(s) to use in addition to or in place of what I already have? Here is the code:

<table cellpadding="2" cellspacing="1" cols="3" border="1" width="100%"><colgroup width="24%" /><colgroup width="12%" /><colgroup width="64%" /><tbody><tr><td><div align="left"><p>test string</p></div></td><td colspan="2"><div align="left"><p>long test string</p></div></td></tr><tr><td><div align="left"><p>test string</p></div></td><td colspan="2"><div align="left"><p>long test string</p></div></td></tr><tr><td><div align="left"><p>test string</p></div></td><td colspan="2"><div align="left"><p>long test string</p></div></td></tr><tr><td><div><p><br></p></div></td><td><div align="left"><p>test string</p></div></td><td><div align="left"><p>test string</p></div></td></tr><tr><td><div><p><br></p></div></td><td><div align="left"><p>test string</p></div></td><td><div align="left"><p>test string</p></div></td></tr></tbody></table>

Link to comment
Share on other sites

Use CSS to specify column widths.

<table cellpadding="2" cellspacing="1" cols="3" border="1" width="100%"><colgroup class="one" /><colgroup  class="two" /><colgroup  class="three" /><tbody><tr><td><div align="left"><p>test string</p></div></td><td colspan="2"><div align="left"><p>long test string</p></div></td></tr><tr><td><div align="left"><p>test string</p></div></td><td colspan="2"><div align="left"><p>long test string</p></div></td></tr><tr><td><div align="left"><p>test string</p></div></td><td colspan="2"><div align="left"><p>long test string</p></div></td></tr><tr><td><div><p><br></p></div></td><td><div align="left"><p>test string</p></div></td><td><div align="left"><p>test string</p></div></td></tr><tr><td><div><p><br></p></div></td><td><div align="left"><p>test string</p></div></td><td><div align="left"><p>test string</p></div></td></tr></tbody></table>

CSS:

.one {width: 24%;}.two {width: 12%;}.three {width: 64%;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...