table表格制作

表格图片预览:

<div class="buss">
<table>
        <tbody>
          <tr>
            <th class="fir">活动类型</th><th>9.9包邮(秒杀)</th><th>20元封顶</th><th>暗号团</th><th>独家折扣</th>
          </tr>
          <tr>
            <td class="fir">活动价格</td><td>9.9包邮</td><td>10-20元包邮</td><td>不限</td><td>大于20元</td>
          </tr>
          <tr>
            <td class="fir">C店要求</td><td>3红心以上</td><td>1钻以上</td><td>1钻以上</td><td>1钻以上</td>
          </tr>
          <tr>
            <td class="fir">B店要求</td><td>不限</td><td>不限</td><td>不限</td><td>不限</td>
          </tr>
          <tr>
            <td class="fir">近30日销量</td><td>不限</td><td>&gt;10件</td><td>&gt;10件</td><td>&gt;15件</td>
          </tr>
          <tr>
            <td class="fir">动态评分</td><td>同行持平及以上</td><td>同行持平及以上</td><td>同行持平及以上</td><td>同行持平及以上</td>
          </tr>
          <tr>
            <td class="fir">商品评价</td><td>不限</td><td>&gt;20条</td><td>&gt;20条</td><td>&gt;20条</td>
          </tr>
          <tr>
            <td class="fir">报名数量</td><td>&gt;200件</td><td>&gt;200件</td><td>不限</td><td>&gt;100件</td>
          </tr>
          <tr>
            <td class="fir">历史价格</td><td>&gt;本活动价格</td><td>&gt;本活动价格</td><td>&gt;本活动价格</td><td>&gt;本活动价格</td>
          </tr>
          <tr>
            <td class="fir">审核周期</td><td>7工作日</td><td>5工作日</td><td>5工作日</td><td>5工作日</td>
          </tr>
          <tr>
            <td class="fir">打折方式</td><td>限时、VIP</td><td>限时、VIP</td><td>人工改价</td><td>限时、VIP</td>
          </tr>
          <tr>
            <td class="fir">准时开始</td><td>定时上架</td><td>定时上架</td><td>定时上架</td><td>定时上架</td>
          </tr>
          <tr>
            <td class="fir">重复周期</td><td>21天后</td><td>28天后</td><td>31天后</td><td>31天后</td>
          </tr>
          <tr>
            <td class="fir">同店活动</td><td>&gt;3天</td><td>&gt;3天</td><td>&gt;3天</td><td>&gt;3天</td>
          </tr>
          <tr>
            <td class="fir">店内客服</td><td>必须在线</td><td>必须在线</td><td>必须在线</td><td>必须在线</td>
          </tr>
          <tr>
            <td class="fir">优先通过</td><td>价值较大商品</td><td>价值较大商品</td><td>价值较大商品</td><td>价值较大商品</td>
          </tr>
        </tbody>
      </table>
      </div>
.buss{ line-height:25px; width:712px; padding:14px;}
.buss table{font-size: 14px;background: white;border: 1px solid #CCC;border-collapse: collapse;margin-bottom: 4px;
margin-top: 10px;width: 100%;}
.buss tbody {display: table-row-group;vertical-align: middle;border-color: inherit;}
.buss td, .buss th {border-bottom: 1px solid #CCC;border-right: 1px solid #CCC;padding: 0 3px;
font-size: 12px;}
.buss td{background:#fff;}
.buss th{background: #F1F9FE;}
.buss th.fir, .buss td.fir {font-weight: 400;text-align: center;color: #1170B0;background: #F1F9FE;}

关键:border-collapse: collapse;

将2边合为一边

posted @ 2012-11-07 16:12  tinyphp  Views(1660)  Comments(0Edit  收藏  举报