A table but pure css : div table « Tags « HTML / CSS
- HTML / CSS
- Tags
- div table
A table but pure css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.cell4 {
width:100%;
background:blue;
float:left;
margin:1px 0 0;
}
.cell3 {
width:75%;
background:red;
float:left;
}
.cell2 {
width:66%;
background:yellow;
float:left;
}
.cell1 {
width:50%;
background:pink;
float:left;
}
.cell2a, .cell3a, .cell4a {
width:100%;
float:right;
margin-right:-100%;
position:relative;
margin-left:2px;
}
.cell4a {
margin-right:-103%;
position:relative;
margin-left:8px;
}
p {padding:2px;margin:0}
</style>
</head>
<body>
<div class="cell4">
<div class="cell3">
<div class="cell2">
<div class="cell1">
<div class="cell2a">
<div class="cell3a">
<div class="cell4a">
<p>This is cell 4 with the most text: This is cell 4 with the most
text: </p>
</div>
<p>This is Cell 3 : This is Cell 3 :</p>
</div>
<p>This is cell 2 : This is cell 2</p>
</div>
<p>This is cell 1 : This is cell 1 :</p>
</div>
</div>
</div>
</div>
<div class="cell4">
<div class="cell3">
<div class="cell2">
<div class="cell1">
<div class="cell2a">
<div class="cell3a">
<div class="cell4a">
<p>This is cell 4 : This is cell 4 : </p>
</div>
<p>This is cell 3 with the most text: This is cell 3 with the most
text:</p>
</div>
<p>This is cell 2 : This is cell 2</p>
</div>
<p>This is Cell 1 : This is Cell 1 :</p>
</div>
</div>
</div>
</div>
<div class="cell4">
<div class="cell3">
<div class="cell2">
<div class="cell1">
<div class="cell2a">
<div class="cell3a">
<div class="cell4a">
<p>This is cell 4 : This is cell 4 : </p>
</div>
<p>This is Cell 3 : This is Cell 3 :</p>
</div>
<p>This is cell 2 with the most text: This is cell 2 with the most text</p>
</div>
<p>This is cell 1 : This is cell 1</p>
</div>
</div>
</div>
</div>
<div class="cell4">
<div class="cell3">
<div class="cell2">
<div class="cell1">
<div class="cell2a">
<div class="cell3a">
<div class="cell4a">
<p>This is cell 4 : This is cell 4 : </p>
</div>
<p>This is Cell 3 : This is Cell 3 :</p>
</div>
<p>This is cell 2 : This is cell 2</p>
</div>
<p>This is cell 1 with the most text: This is cell 1 with the most text</p>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category