make cell span two colums css3 (no tables)

Question

I am trying to build a table purely in CSS. Have succeded so far, even though I have one issue: How do I make a cell span two columns?

I made this fiddle, and in the top where the "XXXXXX" with the grey background is, I simply cannot make it span the width of my box. I tried to use column-span, but it did not work, so I guess I have redesign it in another fashion .. just how?

I am using this code, but the content of tabledata_lang stops just where tablecells below stop:

#tabledata_lang {
padding: 6px;
width:100%;
}

See my fiddle here: http://jsfiddle.net/T7wU2/

(Probably easier to see my issue here...)

Hope someone has some input..

Regards Regin

Just a note, you have invalid markup, id attributes should be unique in a HTML page — omma2289, Jul 21 '13 at 06:59
use classes instead of ids. Also I looked around and I didn't see any elements with the id of `#tabledata_lang`. Finally I believe there should be a colspan attribute where you can specify how many columns you want your td to span. — aug, Jul 21 '13 at 07:01
also what do you mean by "no tables" and "purely in CSS"? your fiddle shows a regular HTML table — omma2289, Jul 21 '13 at 07:03
possible duplicate of [HTML colspan in CSS](http://stackoverflow.com/questions/2403990/html-colspan-in-css) — gilly3, Jul 21 '13 at 07:05
@koala_dev Ah yes, sorry, I first build it all in DIVs but then abandoned it. But you are of course right, i do use HTML. But my idea was, that I wanted to do all the styling in CSS. Without the "colspan="2"". — Regin, Jul 25 '13 at 00:34
@Regin refer to the question linked by @gilly3 for a discussion on the use of `colspan`. What I would advise is to use HTML tables only to display tabular data (and I don't see any issue with using colspan), if what you need is to display content in a grid manner, then look for a CSS framework that provides a grid system such as [twitter bootstrap](http://twitter.github.io/bootstrap/scaffolding.html#gridSystem) — omma2289, Jul 25 '13 at 05:27

score 1 · Answer 1 · edited Jul 21 '13 at 07:13

1

I think you are looking for the colspan attribute

<td colspan="2"></td>

This will make a cell span 2 columns

edited Jul 21 '13 at 07:13

aug

11,138
9
72
93

answered Jul 21 '13 at 07:00

omma2289

54,161
8
64
68

Thanks - but If I do not want to use the colspan="2" directly in the HTML code, but would like to use CSS to make the cell span the two rows.. can I do that - I cant seem to find any code that does it. – Regin Jul 25 '13 at 00:35

make cell span two colums css3 (no tables)

1 Answers1