"colspan" in css tables?

[jayjay960]

So, I need a table to look like this:

 

#############
#     #     #
#############
#     #     #
#############
#           #
#############

 

Now just using plain html, that would be easy enough to do, just adding colspan="2" to the last cell, however, I'm using css tables, as in, this is what my table looks like:

<style>
.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
</style>

<div class="table">
<div class="tr"><div class="td">Cell 1</div><div class="td">Cell 2</div></div>
<div class="tr"><div class="td">Cell 3</div><div class="td">Cell 4</div></div>
<div class="tr"><div class="td">Cell 5</div></div>
</div>

 

Now, what I want to know is if there is a CSS equivalent to colspan that lets one cell take up more room. I've tried just setting width: 100%;, and using the html colspan="2" but neither work. I have the CSS2 specification pdf which is helpful, but I haven't been able to find any answers in there. Can anyone help?

[BLaZuRE]

You may want to try 'table-column-group'.

http://www.w3.org/TR/CSS2/tables.html#table-display

http://www.w3schools.com/tags/tag_colgroup.asp

 

I've never bothered with display: table since IE won't support it

http://www.w3schools.com/htmldom/prop_style_display.asp

[haku]

I heard IE8 can handle display:table, though I haven't tried it. Not that it matters though, since there are still so many people using IE6 and IE7.

[mcgregs]

Please could someone have a look at this and advise re the colspan bit... is this allowed??

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

}

h1 {

colour: #FF0000;/*red*/;

background-color: #3333;/*grey*/;

}

th, td, colspan {

border: 1et solid #666666;

}

 

p, li, dd, dt {

color: #000000;

background-color: #FFFFFF;

font-size: 1em;

font-style: normal;

}

[haku]

No, you can't do that.

 

Maybe using col tags would help.

[TheFilmGod]

Why not just use tables? CSS is awesome, but its support when it comes down to replacing tables is terrible.