SUI
新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动，具体请阅读更新日志。

设计规范

开发者文档

表格有两种用法：

  • 一种是简单的数据列表，只包含简单的文本和链接。
  • 另一种是把表格当做容器，里面会有很复杂的结构，可能包括图片、链接、复杂的文案等。

1. 默认表格

＃ 待付款 宝宝数量 交易金额
所有交易 9999.00 999 99999.00
待付款 9999.00 999 99999.00
已发货 9999.00 999 99999.00
已成功 9999.00 999 99999.00 
  1. <table class="sui-table">
  2.   <thead>
  3.     <tr>
  4.       <th>＃</th>
  5.       <th>待付款</th>
  6.       <th>宝宝数量</th>
  7.       <th>交易金额</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <td>所有交易</td>
  13.       <td>9999.00</td>
  14.       <td>999</td>
  15.       <td>99999.00</td>
  16.     </tr>
  17.     <tr>
  18.       <td>待付款</td>
  19.       <td>9999.00</td>
  20.       <td>999</td>
  21.       <td>99999.00</td>
  22.     </tr>
  23.     <tr>
  24.       <td>已发货</td>
  25.       <td>9999.00</td>
  26.       <td>999</td>
  27.       <td>99999.00</td>
  28.     </tr>
  29.     <tr>
  30.       <td>已成功</td>
  31.       <td>9999.00</td>
  32.       <td>999</td>
  33.       <td>99999.00</td>
  34.     </tr>
  35.   </tbody>
  36. </table>
默认的表格样式

2. 带边框和不带边框的表格

＃ 待付款 宝宝数量 交易金额
所有交易 9999.00 999 99999.00
待付款 9999.00 999 99999.00
已发货 9999.00 999 99999.00
已成功 9999.00 999 99999.00
＃ 待付款 宝宝数量 交易金额
所有交易 9999.00 999 99999.00
待付款 9999.00 999 99999.00
已发货 9999.00 999 99999.00
已成功 9999.00 999 99999.00 
  1. <table class="sui-table table-bordered">
  2.   <thead>
  3.     <tr>
  4.       <th>＃</th>
  5.       <th>待付款</th>
  6.       <th>宝宝数量</th>
  7.       <th>交易金额</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <td>所有交易</td>
  13.       <td>9999.00</td>
  14.       <td>999</td>
  15.       <td>99999.00</td>
  16.     </tr>
  17.     <tr>
  18.       <td>待付款</td>
  19.       <td>9999.00</td>
  20.       <td>999</td>
  21.       <td>99999.00</td>
  22.     </tr>
  23.     <tr>
  24.       <td>已发货</td>
  25.       <td>9999.00</td>
  26.       <td>999</td>
  27.       <td>99999.00</td>
  28.     </tr>
  29.     <tr>
  30.       <td>已成功</td>
  31.       <td>9999.00</td>
  32.       <td>999</td>
  33.       <td>99999.00</td>
  34.     </tr>
  35.   </tbody>
  36. </table>
  37. <table class="sui-table table-nobordered">
  38.   <thead>
  39.     <tr>
  40.       <th>＃</th>
  41.       <th>待付款</th>
  42.       <th>宝宝数量</th>
  43.       <th>交易金额</th>
  44.     </tr>
  45.   </thead>
  46.   <tbody>
  47.     <tr>
  48.       <td>所有交易</td>
  49.       <td>9999.00</td>
  50.       <td>999</td>
  51.       <td>99999.00</td>
  52.     </tr>
  53.     <tr>
  54.       <td>待付款</td>
  55.       <td>9999.00</td>
  56.       <td>999</td>
  57.       <td>99999.00</td>
  58.     </tr>
  59.     <tr>
  60.       <td>已发货</td>
  61.       <td>9999.00</td>
  62.       <td>999</td>
  63.       <td>99999.00</td>
  64.     </tr>
  65.     <tr>
  66.       <td>已成功</td>
  67.       <td>9999.00</td>
  68.       <td>999</td>
  69.       <td>99999.00</td>
  70.     </tr>
  71.   </tbody>
  72. </table>
通过 tabled-bordered 和 table-nobordered 可以控制表格的边框显示

3. 只有内边框的表格

＃ 待付款 宝宝数量 交易金额
所有交易 9999.00 999 99999.00
待付款 9999.00 999 99999.00
已发货 9999.00 999 99999.00
已成功 9999.00 999 99999.00 
  1. <table class="sui-table table-bordered-simple">
  2.   <thead>
  3.     <tr>
  4.       <th>＃</th>
  5.       <th>待付款</th>
  6.       <th>宝宝数量</th>
  7.       <th>交易金额</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <td>所有交易</td>
  13.       <td>9999.00</td>
  14.       <td>999</td>
  15.       <td>99999.00</td>
  16.     </tr>
  17.     <tr>
  18.       <td>待付款</td>
  19.       <td>9999.00</td>
  20.       <td>999</td>
  21.       <td>99999.00</td>
  22.     </tr>
  23.     <tr>
  24.       <td>已发货</td>
  25.       <td>9999.00</td>
  26.       <td>999</td>
  27.       <td>99999.00</td>
  28.     </tr>
  29.     <tr>
  30.       <td>已成功</td>
  31.       <td>9999.00</td>
  32.       <td>999</td>
  33.       <td>99999.00</td>
  34.     </tr>
  35.   </tbody>
  36. </table>

4. 表头在侧边

所有交易 9999.00 999 99999.00
待付款 9999.00 999 99999.00
已发货 9999.00 999 99999.00
已成功 9999.00 999 99999.00 
  1. <table class="sui-table table-sideheader">
  2.   <tbody>
  3.     <tr>
  4.       <th>所有交易</th>
  5.       <td>9999.00</td>
  6.       <td>999</td>
  7.       <td>99999.00</td>
  8.     </tr>
  9.     <tr>
  10.       <th>待付款</th>
  11.       <td>9999.00</td>
  12.       <td>999</td>
  13.       <td>99999.00</td>
  14.     </tr>
  15.     <tr>
  16.       <th>已发货</th>
  17.       <td>9999.00</td>
  18.       <td>999</td>
  19.       <td>99999.00</td>
  20.     </tr>
  21.     <tr>
  22.       <th>已成功</th>
  23.       <td>9999.00</td>
  24.       <td>999</td>
  25.       <td>99999.00</td>
  26.     </tr>
  27.   </tbody>
  28. </table>
表头在侧面

5. 斑马线

＃ 待付款 宝宝数量 交易金额
所有交易 9999.00 999 99999.00
待付款 9999.00 999 99999.00
已发货 9999.00 999 99999.00
已成功 9999.00 999 99999.00
所有交易 9999.00 所有交易 99999.00
待付款 9999.00 待付款 99999.00
已发货 9999.00 已发货 99999.00
已成功 9999.00 已成功 99999.00 
  1. <table class="sui-table table-zebra">
  2.   <thead>
  3.     <tr>
  4.       <th>＃</th>
  5.       <th>待付款</th>
  6.       <th>宝宝数量</th>
  7.       <th>交易金额</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <td>所有交易</td>
  13.       <td>9999.00</td>
  14.       <td>999</td>
  15.       <td>99999.00</td>
  16.     </tr>
  17.     <tr>
  18.       <td>待付款</td>
  19.       <td>9999.00</td>
  20.       <td>999</td>
  21.       <td>99999.00</td>
  22.     </tr>
  23.     <tr>
  24.       <td>已发货</td>
  25.       <td>9999.00</td>
  26.       <td>999</td>
  27.       <td>99999.00</td>
  28.     </tr>
  29.     <tr>
  30.       <td>已成功</td>
  31.       <td>9999.00</td>
  32.       <td>999</td>
  33.       <td>99999.00</td>
  34.     </tr>
  35.   </tbody>
  36. </table>
  37.                   <table class="sui-table table-vzebra">
  38.                     <tbody>
  39.                       <tr>
  40.                         <td>所有交易</td>
  41.                         <td>9999.00</td>
  42.                         <td>所有交易</td>
  43.                         <td>99999.00</td>
  44.                       </tr>
  45.                       <tr>
  46.                         <td>待付款</td>
  47.                         <td>9999.00</td>
  48.                         <td>待付款</td>
  49.                         <td>99999.00</td>
  50.                       </tr>
  51.                       <tr>
  52.                         <td>已发货</td>
  53.                         <td>9999.00</td>
  54.                         <td>已发货</td>
  55.                         <td>99999.00</td>
  56.                       </tr>
  57.                       <tr>
  58.                         <td>已成功</td>
  59.                         <td>9999.00</td>
  60.                         <td>已成功</td>
  61.                         <td>99999.00</td>
  62.                       </tr>
  63.                     </tbody>
  64.                   </table>
水平和垂直的斑马线

6. 首要表格

＃ 待付款 宝宝数量 交易金额
所有交易 9999.00 999 99999.00
待付款 9999.00 999 99999.00
已发货 9999.00 999 99999.00
已成功 9999.00 999 99999.00 
  1. <table class="sui-table table-primary">
  2.   <thead>
  3.     <tr>
  4.       <th>＃</th>
  5.       <th>待付款</th>
  6.       <th>宝宝数量</th>
  7.       <th>交易金额</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <td>所有交易</td>
  13.       <td>9999.00</td>
  14.       <td>999</td>
  15.       <td>99999.00</td>
  16.     </tr>
  17.     <tr>
  18.       <td>待付款</td>
  19.       <td>9999.00</td>
  20.       <td>999</td>
  21.       <td>99999.00</td>
  22.     </tr>
  23.     <tr>
  24.       <td>已发货</td>
  25.       <td>9999.00</td>
  26.       <td>999</td>
  27.       <td>99999.00</td>
  28.     </tr>
  29.     <tr>
  30.       <td>已成功</td>
  31.       <td>9999.00</td>
  32.       <td>999</td>
  33.       <td>99999.00</td>
  34.     </tr>
  35.   </tbody>
  36. </table>
首要表格，颜色接近首要按钮的颜色

7. 二维表格

# 新客户 uv 新客户转化率（％） 老客户 uv 老客户转化率（％）
昨日 1.0 1.0 1.0 1.0
前日 1.0 0.0 0.0 0.0
前两天 1.0 1.0 0.0 0.0
行业平均 50.73 0.73 0.73 0.73
当前现状 低于平均 持平 高于平均 持平 
  1. <table class="sui-table table-bordered table-sideheader">
  2.   <thead>
  3.     <tr>
  4.       <th>#</th>
  5.       <th>新客户 uv</th>
  6.       <th>新客户转化率（％）</th>
  7.       <th>老客户 uv</th>
  8.       <th>老客户转化率（％）</th>
  9.     </tr>
  10.   </thead>
  11.   <tbody>
  12.     <tr>
  13.       <td>昨日</td>
  14.       <td>1.0</td>
  15.       <td>1.0</td>
  16.       <td>1.0</td>
  17.       <td>1.0</td>
  18.     </tr>
  19.     <tr>
  20.       <td>前日</td>
  21.       <td>1.0</td>
  22.       <td>0.0</td>
  23.       <td>0.0</td>
  24.       <td>0.0</td>
  25.     </tr>
  26.     <tr>
  27.       <td>前两天</td>
  28.       <td>1.0</td>
  29.       <td>1.0</td>
  30.       <td>0.0</td>
  31.       <td>0.0</td>
  32.     </tr>
  33.     <tr>
  34.       <td>行业平均</td>
  35.       <td>50.73</td>
  36.       <td>0.73</td>
  37.       <td>0.73</td>
  38.       <td>0.73</td>
  39.     </tr>
  40.     <tr>
  41.       <td>当前现状</td>
  42.       <td>低于平均</td>
  43.       <td>持平</td>
  44.       <td>高于平均</td>
  45.       <td>持平</td>
  46.     </tr>
  47.   </tbody>
  48. </table>
二维表格

8. 综合表格一

  1. <table class="sui-table table-bordered">
  2.   <thead>
  3.     <tr>
  4.       <th colspan="5"> 
  5.         <label class="checkbox pull-left">
  6.           <input type="checkbox">订单编号：7867473872181848
  7.         </label><span class="pull-right">成交时间：2014-01-11 11:59</span>
  8.       </th>
  9.     </tr>
  10.   </thead>
  11.   <tbody>
  12.     <tr>
  13.       <td width="50%">
  14.         <div class="typographic"><img src="http://img.f2e.taobao.net/img.png_50x50.jpg"><a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a><span>1</span>
  15.           <ul class="unstyled">
  16.             <li>申请售后</li>
  17.             <li>投诉卖家</li>
  18.           </ul>
  19.         </div>
  20.       </td>
  21.       <td rowspan="2" width="11%" class="center">56.50</td>
  22.       <td rowspan="2" width="13%" class="center">
  23.         <ul class="unstyled">
  24.           <li>交易成功</li>
  25.           <li><a href="#">订单详情</a></li>
  26.           <li><a href="#">对方已评</a></li>
  27.         </ul>
  28.       </td>
  29.       <td rowspan="2" width="13%" class="center"><a href="#" class="btn">评价 </a></td>
  30.       <td rowspan="2" width="13%" class="center">
  31.         <ul class="unstyled">
  32.           <li><a href="#">删除</a></li>
  33.           <li><a href="#">标记</a></li>
  34.           <li><a href="#">分享</a></li>
  35.         </ul>
  36.       </td>
  37.     </tr>
  38.     <tr>
  39.       <td width="50%">
  40.         <div class="typographic"><img src="http://img.f2e.taobao.net/img.png_50x50.jpg"><a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a><span>1</span>
  41.           <ul class="unstyled">
  42.             <li>申请售后</li>
  43.             <li>投诉卖家</li>
  44.           </ul>
  45.         </div>
  46.       </td>
  47.     </tr>
  48.   </tbody>
  49. </table>

9. 综合表格二

对比海外卖家合作时间: 2013-05-22起
001
  • 0 (一个月)
  • 0 (三个月)
  • 0 (一个月)
  • 0 (三个月)
 0 0.00% 0.00% 
  1. <table class="sui-table table-bordered-simple">
  2.   <thead>
  3.     <tr>
  4.       <th colspan="7">
  5.         <label class="checkbox">
  6.           <input type="checkbox">
  7.         </label><a href="#">对比海外卖家</a><span class="pull-right gray">合作时间: 2013-05-22起</span>
  8.       </th>
  9.     </tr>
  10.   </thead>
  11.   <tbody>
  12.     <tr>
  13.       <td width="20%" class="center">001</td>
  14.       <td width="13%" class="center">
  15.         <ul class="unstyled">
  16.           <li>0 (一个月)</li>
  17.           <li>0 (三个月)</li>
  18.         </ul>
  19.       </td>
  20.       <td width="13%" class="center">
  21.         <ul class="unstyled">
  22.           <li>0 (一个月) </li>
  23.           <li>0 (三个月)</li>
  24.         </ul>
  25.       </td>
  26.       <td width="13%" class="center">0</td>
  27.       <td width="13%" class="center">0.00%</td>
  28.       <td width="13%" class="center">0.00%</td>
  29.       <td class="center">
  30.         <ul class="unstyled">
  31.           <li><a href="#">终止</a></li>
  32.           <li><a href="#">查看分销商品</a></li>
  33.           <li><a href="#">授权</a></li>
  34.           <li><a href="#">授权品牌</a></li>
  35.           <li><a href="#">开通代销</a></li>
  36.         </ul>
  37.       </td>
  38.     </tr>
  39.   </tbody>
  40. </table>
  • @time 2014.03.07
  • @author [本站仅为SUI文档保留的镜像站，与官方无关]