I´m trying to simulate a table using only CSS and DIV. The problem is that nothing that I do can perfectly simulate a table layout behavior.
Below is the table layout that I want and immediately below this one, what I could achieve with CSS/DIV:
Html/CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Teste</title>
<style type="text/css">
table{
table-layout:fixed;
width: 333px;
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
table th, table td
{
border-width: 1px;
padding: 1px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
table th.column1, table td.column1{
width:60px;
background-color:#CCD9FF;
}
table th.column2, table td.column2{
width:100px;
background-color:#ECFFE5;
}
table th.column3, table td.column3{
width:60px;
background-color:#FFEBE5;
}
table th.column4, table td.column4{
width:100px;
background-color: #FFFFCC;
}
div#tablecontainer
{
width: 328px;
}
div.tablecontainerrow
{
clear:both;
}
div#tablecontainer div div.column1
{
width: 60px;
float:left;
border: 1px solid black;
background-color:#CCD9FF;
}
div#tablecontainer div div.column2
{
width: 100px;
float:left;
border: 1px solid black;
background-color:#ECFFE5;
}
div#tablecontainer div div.column3
{
width: 60px;
float:left;
border: 1px solid black;
background-color:#FFEBE5;
}
div#tablecontainer div div.column4
{
width: 100px;
float:left;
border: 1px solid black;
background-color:#FFFFCC;
}
</style>
</head>
<body>
<h1>CSS and TABLE</h1>
<table>
<tr>
<th class="column1">Header 1</th>
<th class="column2">Header 2</th>
<th class="column3">Header 3</th>
<th class="column4">Header 4</th>
</tr>
<tr>
<td class="column1">line 1 column 1</td>
<td class="column2">line 1 column 2</td>
<td class="column3">line 1 column 3</td>
<td class="column4">line 2 column 4</td>
</tr>
<tr>
<td class="column1">line 2 column 1</td>
<td class="column2">line 2 column 2</td>
<td class="column3">line 2 column 3</td>
<td class="column4">line 2 column 4</td>
</tr>
<tr>
<td class="column1">line 3 column 1</td>
<td class="column2">line 3 column 2</td>
<td class="column3">line 3 column 3 (more content)</td>
<td class="column4">line 3 column 4</td>
</tr>
</table>
<h1>CSS and DIV</h1>
<div id="tablecontainer">
<div class="tablecontainerrow">
<div class="column1">Header 1</div>
<div class="column2">Header 2</div>
<div class="column3">Header 3</div>
<div class="column4">Header 4</div>
<div class="clear" />
</div>
<div class="tablecontainerrow">
<div class="column1">line 1 column 1</div>
<div class="column2">line 1 column 2</div>
<div class="column3">line 1 column 3</div>
<div class="column4">line 1 column 4</div>
</div>
<div class="tablecontainerrow">
<div class="column1">line 2 column 1</div>
<div class="column2">line 2 column 2</div>
<div class="column3">line 2 column 3</div>
<div class="column4">line 2 column 4</div>
</div>
<div class="tablecontainerrow">
<div class="column1">line 3 column 1</div>
<div class="column2">line 3 column 2</div>
<div class="column3">line 3 column 3 (more content)</div>
<div class="column4">line 3 column 4</div>
</div>
</div>
</body>
</html>
What might I modify to allow the CSS/DIV layout resembles the CSS/Table?
Some complementary information
- Think in this as an exercise (a challenge). So please do not provide me answers saying the use of a table is a better solution for this situation.
- In fact I´m wondering a solution that can change completely the tabular layout of data to another one simply changing the CSS. In this case, the use of
<table>is out of question.- I want compatibility with IE 7+, FF3+, Chrome 4+.
Thanks!
Again, you should use a table.
But if this is just an exercise in CSS, for kicks…
<div class="clear" />.overflow:hiddenLike so: http://jsfiddle.net/39F88/