后台订单列表的样式
效果如下图,商品件数可以根据自己 的需要调整,<td rowspan="2"><p>6760.0</p> 数字2代表需要合并的行数:
以下为css样式,可以根据自己的需要进行调整。
<style> .ordertab1{border-top:1px solid #e6e6e6;border-left:1px solid #e6e6e6;} .ordertab1 td{border-right:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6;} .orderbg{height:33px;line-height:33px;background:#e6e6e6;text-align:center;border-bottom:1px solid #d5d5d5;} .orderbg1{height:32px;line-height:32px;color:#636363;} .orderbg1 span{padding-left:15px;} </style>
以下为页面代码部分:
<table width="980" border="0" cellspacing="0" cellpadding="0" class="ordertab1" > <tr class="orderbg"> <td height="36" colspan="2">商品</td> <td width="108">单价(元)</td> <td width="102">数量</td> <td width="170">实付款(元)</td> <td width="168">订单状态</td> <td width="132">操作</td> </tr> <tr> <td colspan="8" class="orderbg1"><span> <input name="" type="checkbox" value="" /> </span><span>订单编号:1049865231</span><span> 成交时间:2011-10-25 </span><span>河南火星人商贸有限公司 </span></td> </tr> <tr align="center"> <td width="111" height="96" ><p class="proimg"><img src="image/proimg.jpg" width="60" height="60" /></p></td> <td width="188" >卡索古堡干红葡萄酒</td> <td>388.0</td> <td><strong>10</strong></td> <td rowspan="2"><p>6760.0</p> <p class="gray">(含快递:120.0元)</p></td> <td rowspan="2"><p class="red">交易成功</p> <p class="blue"> <a href="#">订单详情</a></p> <p class="blue"><a href="#">查看物流</a></p> <p>买家已评</p></td> <td ><p><a href="#">追加评价</a></p></td> </tr> <tr align="center"> <td height="96"><p class="proimg"><img src="image/proimg.jpg" width="60" height="60" /></p></td> <td >卡索古堡干红葡萄酒</td> <td>388.0</td> <td><strong>10</strong></td> <td><p><a href="#">追加评价</a></p></td> </tr> <tr> <td colspan="8" class="orderbg1"><span> <input name="" type="checkbox" value="" /> </span><span>订单编号:1049865231</span><span> 成交时间:2011-10-25</span><span>河南火星人商贸有限公司 </span></td> </tr> <tr align="center"> <td height="96"><p class="proimg"><img src="image/proimg.jpg" width="60" height="60" /></p></td> <td>卡索古堡干红葡萄酒</td> <td>388.0</td> <td><strong>10</strong></td> <td><p>3880.0</p> <p class="gray">(含快递:120.0元)</p></td> <td><p class="red">交易成功</p> <p class="blue"> <a href="#">订单详情</a></p> <p class="blue"><a href="#">查看物流</a></p> <p>买家已评</p> </td> <td><p><a href="#">追加评价</a></p></td> </tr> </table>