使用css布局实现表格,实现的效果如下图:
html 及代码如下:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.common
{
float:left;display:block;
padding:8px 0px 10px 1%;
background-color:#AADAAA;
}
.c_left
{
border-top:1px solid #0000AA;
border-left:1px solid #0000AA;
}
.c_middle
{
border-top:1px solid #0000AA;
border-left:1px solid #0000AA;
margin-left:-1px;
}
.c_right
{
border-left:1px solid #0000AA;
border-right:1px solid #0000AA;
border-top:1px solid #0000AA;
margin-left:-3px;
}
.clr
{
clear:both;
}
.bottom
{
border-bottom:1px solid #0000AA;
}
</style>
</head>
<body>
<div style="width:100%" class="bottom">
<div id="row1">
<div style="width:24%" class=" common c_left">第1列</div>
<div style="width:24%" class=" common c_middle">第2列</div>
<div style="width:24%" class=" common c_middle">第3列</div>
<div style="width:24%" class=" common c_right">第4列</div>
<div class="clr"></div>
</div>
<div id="row2">
<div style="width:24%" class=" common c_left">第1列</div>
<div style="width:24%" class=" common c_middle">第2列</div>
<div style="width:24%" class=" common c_middle">第3列</div>
<div style="width:24%" class=" common c_right">第4列</div>
<div class="clr"></div>
</div>
<div id="row3">
<div style="width:24%" class=" common c_left">第1列</div>
<div style="width:24%" class=" common c_middle">第2列</div>
<div style="width:24%" class=" common c_middle">第3列</div>
<div style="width:24%" class=" common c_right">第4列</div>
<div class="clr"></div>
</div>
</div>
</body>
</html>