CSS table : div table « Tags « HTML / CSS
- HTML / CSS
- Tags
- div table
CSS table
<!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">
* {
margin: 0;
padding: 0
}
.container {
background-color: #FFFFCC;
width: 760px;
border: 1px solid #000;
}
* html .container {
width: 762px;
}
.header {
width: 760px;
border-bottom: 1px solid #000;
}
.header ul {
list-style: none
}
.header ul li {
width: 148px;
border-left: 1px solid #000;
float: left;
font-weight: bold;
padding-left: 2px;
}
* html .header ul li {
width: 151px;
}
.data {
width: 150px;
float: left;
padding-left: 2px;
}
* html .data {
width: 152px;
}
.rowodd,.roweven {
position: relative;
width: 760px;
border-top: 1px solid #000;
background-color: #E8E8E8;
}
.roweven {
background-color: #D1DCE9;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="header clearfix">
<ul>
<li>Column 1</li>
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
</ul>
</div>
<div class="rowodd clearfix">
<div class="data">
<p>Company 1</p>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
</div>
<div class="data"><p>0</p></div>
<div class="data"><p>1</p></div>
<div class="data"><p>s@h.com</p></div>
<div class="data"><p>www.w.com</p></div>
</div>
<div class="roweven clearfix">
<div class="data">
<p>Company 1</p>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
</div>
<div class="data"><p>1</p></div>
<div class="data"><p>3</p></div>
<div class="data"><p>s@h.com</p></div>
<div class="data"><p>www.w.com</p></div>
</div>
<div class="rowodd clearfix">
<div class="data">
<p>Company 1</p>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
</div>
<div class="data"><p>2</p></div>
<div class="data"><p>0</p></div>
<div class="data"><p>s@h.com</p></div>
<div class="data"><p>www.w.com</p></div>
</div>
</div>
</body>
</html>
Related examples in the same category