使用css实现表格布局

最新推荐文章于 2024-05-21 16:29:11 发布

我是王老吉吖

最新推荐文章于 2024-05-21 16:29:11 发布

阅读量709

点赞数

分类专栏： html 文章标签： html css 表格布局

本文链接：https://blog.csdn.net/wangjijun0807/article/details/21171849

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用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>