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：