zoukankan      html  css  js  c++  java
  • 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边合为一边

  • 相关阅读:
    Zabbix安装部署
    设计模式目录导航
    [内排序]八大经典排序合集
    SpringBoot集成基于tobato的fastdfs-client实现文件上传下载和删除
    Docker部署FastDFS(附示例代码)
    Docker部署Portainer搭建轻量级可视化管理UI
    Maven基础知识详解
    SpringBoot整合Swagger2详细教程
    screw一键生成数据库文档
    SpringBoot + Mybatis-Plus 实现多数据源简单示例
  • 原文地址:https://www.cnblogs.com/tinyphp/p/2759011.html
Copyright © 2011-2022 走看看