HTML,使用div+css实现自适应table布局

简单的table布局:

    1:使用 box-sizing以便于使用100%;

    2:每个cell使用float:left,在行末尾使用 clear:both 以使整个行有高度和宽度

   3:使用margin,padding,保证一个单元格拥有最小高度。避免空的单元格。


<html>
<head></head>
<style type="text/css">
div.table{  
    border:1px solid #000000;  
    margin-left:-1px;  
    border-bottom-width:0;  
    border-left-width:0;  
    text-align:left;  
    line-height:40px;  
    
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */ 
}  
  
.clear0{  
    clear:both;  
    height:0px;  
}  
div.table .row{  
    clear:both;  
    overflow:hidden;  
    width:100%;
    border-bottom:1px solid #000000;
}  
.rowbak{  
}  
div.table .srow{/*没有cell的一行*/  
    overflow:visible; 
    width:100%;
    border-bottom:1px solid #000000;  
    border-left:1px solid #000000;  
}  
div.table .cell{  
    border-left:1px solid #000000;  
    float:left;
    margin-bottom:-1000px;  
    padding-bottom:1000px;  
}  
div.table .cellEnd{  
    clear:both;  
    width:0;  
}  
div.table .rowbak .cell{  
    background-color:#ededed;
}  
.w200 {
   width:200px;
}
</style>
<body>
<div class="table" style="line-height:28px;">  
      <div class="row">  
                    <div class="cell w200">时间</div>  
                    <div class="cell w200"><div style="font-size:10px;">来源/回发:项目,个人,服务</div></div>  
                    <div class="cell" style="width:499px">摘要</div>  
                    <div class="cell" style="width:198px;">操作【岗位】</div>  
                    <div class="cellEnd"></div>  
                </div>  
                <div class="row rowbak">  
                    <div class="cell w200">2016/06/30 15:01</div>  
                    <div class="cell w200"><div style="font-size:10px;">我的家庭协作</div></div>  
                    <div class="cell" style="width:499px">XXXXXXXXXXXXXXXXthis is Hello world</div>  
                    <div class="cell" style="width:198px;font-size:12px;line-height:none;">岗位1: 操作1 操作2 操作3 操作4<br />岗位2: 操作1 操作2 操作3 操作4</div>  
                    <div class="cellEnd"></div>  
                </div>  
  
</div>  
</body>
</html>


  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值