DIV+CSS模仿DangDang做的一个类似Table

 

.shoppingbagTable
{...} {
    color:#404040;
    padding-top:10px;
    padding-bottom:10px;
    width:100%;
    float:left;
    text-align:center;
}
.wholeTable
{...} {
    width:95%;
    border:2px solid #818E6E;
}
.bag_top
{...} {
    width:100%;
    border-bottom:1px solid #818E6E; 
    background:#D8E4C6;
    padding-bottom:5px;
    padding-top:5px;
}
.bag_content
{...} {
    padding-bottom:5px;
    padding-top:5px;
    width:100%;
    text-align:left;
    border-bottom:1px solid #D3D3D3;
}
.bag_td_60
{...} {
    width:52%;
    float:left;
}
.bag_td_10
{...} {
    text-align:left;
    width:12%;
    float:left;
}
.bag_input
{...} {
    border:1px solid #797979;
    font-size:12px;
    height:18px;
    line-height:18px;
    text-align:center;
    width:31px;
}
.bag_bottom
{...} {
 border-top:1px solid #818E6E; 
 padding:10px;
 margin-bottom:10px;
}
.bag_bottom_more
{...} {
    width:20%;
    color:#FF7100;
    float:left;
}
.bag_bottom_price
{...} {
    width:80%;
    float:right;
    text-align:right;
    font-size:14px;
}
.bag_bottom_price img
{...} {
    border:0px;
    color:#FFFFFF;
}

相关HTML：

< div  class ="shoppingbagTable" >
         < div  class ="wholeTable" >  
           < div  class ="bag_top" >
               < div  class ="bag_td_60" > 商品名 </ div >
               < div  class ="bag_td_10" > 市场价 </ div >
               < div  class ="bag_td_10" > 当当价 </ div >
               < div  class ="bag_td_10" > 数量 </ div >
               < div  class ="bag_td_10" > 删除 </ div >
           </ div >
          
           < div  class ="bag_content" >
                 < div  style ="width:5%;float:left;" ></ div >
                 < div  style ="width:47%;float:left;text-align:left;" >< a  href ="#" > 白树美白乳液140ml </ a ></ div >
                 < div  class ="bag_td_10"   > ￥210.40  </ div >
                 < div  class ="bag_td_10"   > ￥114.10 </ div >
                 < div  class ="bag_td_10"   >< input  type ="text"  class ="bag_input"  maxlength ="4"  value ="1" />   </ div >
                 < div  class ="bag_td_10"   >< a  href ="#" > 删除 </ a ></ div >
           </ div >
          
           < div  class ="bag_content" >
                 < div  style ="width:5%;float:left;" ></ div >
                 < div  style ="width:47%;float:left;text-align:left;" >< a  href ="#" >      THE FACE SHOP 白树美白乳液140ml </ a ></ div >
                 < div  class ="bag_td_10"   > ￥210.40  </ div >
                 < div  class ="bag_td_10"   > ￥114.10 </ div >
                 < div  class ="bag_td_10"   >< input  type ="text"  class ="bag_input"  maxlength ="4"  value ="1" />   </ div >
                 < div  class ="bag_td_10"   >< a  href ="#" > 删除 </ a ></ div >
           </ div >
          
           < div  class ="bag_content" >
                 < div  style ="width:5%;float:left;" ></ div >
                 < div  style ="width:47%;float:left;text-align:left;" >< a  href ="#" > 白树美白乳液140ml </ a ></ div >
                 < div  class ="bag_td_10"   > ￥210.40  </ div >
                 < div  class ="bag_td_10"   > ￥114.10  </ div >
                 < div  class ="bag_td_10"   >< input  type ="text"  class ="bag_input"  maxlength ="4"  value ="1" />   </ div >
                 < div  class ="bag_td_10"   >< a  href ="#" > 删除 </ a ></ div >
           </ div >
          
           < div  class ="bag_content" >
                 < div  style ="width:5%;float:left;" ></ div >
                 < div  style ="width:47%;float:left;text-align:left;" >< a  href ="#" > 白树美白乳液140ml </ a ></ div >
                 < div  class ="bag_td_10"   > ￥210.40  </ div >
                 < div  class ="bag_td_10"   > ￥114.10 </ div >
                 < div  class ="bag_td_10"   >< input  type ="text"  class ="bag_input"  maxlength ="4"  value ="1" />   </ div >
                 < div  class ="bag_td_10"   >< a  href ="#" > 删除 </ a ></ div >
           </ div >
          
           < div  class ="bag_bottom" >
               < div  class ="bag_bottom_more" >< a  href ="#" > 继续挑选商品>> </ a ></ div >
               < div  class ="bag_bottom_price" > 您共节省： < font  color ="red" > ￥1608.90 </ font > | 商品金额总计： < font  color ="red" > ￥3325.30 </ font > &nbsp;&nbsp;&nbsp;&nbsp; < input  type ="button"  class ="inp_L1"  value ="结算"   /></ div >
           </ div >
          
         </ div >
      </ div >  

对应CSS：