Avatar of msosno
msosno
 asked on

Pure CSS Table and Column Span

I need to create a simple 2x4 table. However, the first row (table title) should be one cell and the second row four cells. How can I make the first cell span all the four columns?

For example,
________________
|    Table       Title     |
________________|    <- row 1 has one big cell
|cell1|cell2|cell3|cell4|
________________|    <- row 2 has four cells

I CANNOT use <table>, and other html tags. Everything should be pure CSS.

I successfully created simple tables with display:table, display:cell, and display:row CSS attributes. However, I do not know how to overcome the lack of column span property.
Web Languages and StandardsHTMLCSS

Avatar of undefined
Last Comment
Rich Rumble

8/22/2022 - Mon
David S.

Why can't you use a <table>?

The term "pure CSS" is a misnomer. A stylesheet by itself is useless. You need some structure, often [X]HTML, for the styles to be applied to.

You could put the "header row" outside of the element with display:table.

FYI, IE5-7 don't support display:table, display:table-row, or display:table-cell.
dbrunton

Two tables, one on top of the other.  The first has one cell, the second has four cells.
amacleod1983

Heres a simple layout showing your table using css andf div's. you should be able tou use it for what you need :-)
<link href="cssTable.css" rel="stylesheet" type="text/css">
<div id="wrap">
  <div id="title">Title </div>
  <div class="cellRow">
    <div class="cell">cell 1</div>
    <div class="cell">cell 2</div>
    <div class="cell">cell 3</div>
    <div class="cell">cell 4</div>
  </div>
</div>
 
 
#wrap {
	width: 600px;
	margin:o auto;
}
#title {
	width:600px;
	height:100px;
	background-color:#CCCCCC;
}
.cellRow {
	width:600px;
	height:100px;
}
.cell {
	width:148px;
	border:1px #666666 solid;
	background-color:#0099FF;
	float:left;
	height:100px;
}

Open in new window

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
SOLUTION
Hube02

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
msosno

ASKER
Thanks to everybody who replied. I changed my code to be regular nested div's. The padding, width, and height are in percentage format. It works in Firefox, but not in IE. What can be the reason?
David S.

> It works in Firefox, but not in IE. What can be the reason?

If I didn't already answer that in my first reply, we'll need to see your [X]HTML and CSS code.
msosno

ASKER
I think that using percentages instead of pixels would make the table scalable for different resolutions. Everything is fine when I am using pixels. However, as I mentioned, with percentages the table works in Firefox, but not IE.

A code snippet is below. Margins+cell widths add up to 100%;
<div class="table" style="width:20%; float:left; text-align:center">
  <div class="leftCell" style="width:49.9%; float:left; margin:0.2% 0% 0.2% 0%;">Sample Text 1</div>
  <div class="rightCell" style="width:49.9%; float:right; margin:0.2% 0% 0.2% 0.2%">Sample Text 2</div>
</div>
  

Open in new window

⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
msosno

ASKER
^^^^I forgot to mention, the above code does not use display:cell, display:row, and other similar properties.^^^^
ASKER CERTIFIED SOLUTION
David S.

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Rich Rumble

I found an interesting pure css table this morning:
http://www.pmob.co.uk/temp/fourcellsboth.htm and
http://www.pmob.co.uk/temp/tabledemo.htm
Messing around with firebug to pretty it up just a bit... very good scalability and overflow control. The one draw back, is that highlighting for copy and paste behaves weird, but if you look at the css and layout it's understandable. Other than that, this example behaves exactly like a table!!
-rich