后台订单列表的样式

效果如下图,商品件数可以根据自己 的需要调整,<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>
原文地址:https://www.cnblogs.com/WZH75171992/p/4962884.html