# |
待付款 |
宝宝数量 |
交易金额 |
所有交易 |
9999.00 |
999 |
99999.00 |
待付款 |
9999.00 |
999 |
99999.00 |
已发货 |
9999.00 |
999 |
99999.00 |
已成功 |
9999.00 |
999 |
99999.00 |
- <table class="sui-table">
- <thead>
- <tr>
- <th>#</th>
- <th>待付款</th>
- <th>宝宝数量</th>
- <th>交易金额</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>所有交易</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>待付款</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>已发货</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>已成功</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- </tbody>
- </table>
默认的表格样式
# |
待付款 |
宝宝数量 |
交易金额 |
所有交易 |
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 |
- <table class="sui-table table-bordered">
- <thead>
- <tr>
- <th>#</th>
- <th>待付款</th>
- <th>宝宝数量</th>
- <th>交易金额</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>所有交易</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>待付款</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>已发货</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>已成功</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- </tbody>
- </table>
- <table class="sui-table table-nobordered">
- <thead>
- <tr>
- <th>#</th>
- <th>待付款</th>
- <th>宝宝数量</th>
- <th>交易金额</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>所有交易</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>待付款</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>已发货</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>已成功</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- </tbody>
- </table>
通过 tabled-bordered
和 table-nobordered
可以控制表格的边框显示
# |
待付款 |
宝宝数量 |
交易金额 |
所有交易 |
9999.00 |
999 |
99999.00 |
待付款 |
9999.00 |
999 |
99999.00 |
已发货 |
9999.00 |
999 |
99999.00 |
已成功 |
9999.00 |
999 |
99999.00 |
- <table class="sui-table table-bordered-simple">
- <thead>
- <tr>
- <th>#</th>
- <th>待付款</th>
- <th>宝宝数量</th>
- <th>交易金额</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>所有交易</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>待付款</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>已发货</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>已成功</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- </tbody>
- </table>
- <table class="sui-table table-sideheader">
- <tbody>
- <tr>
- <th>所有交易</th>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <th>待付款</th>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <th>已发货</th>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <th>已成功</th>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- </tbody>
- </table>
表头在侧面
# |
待付款 |
宝宝数量 |
交易金额 |
所有交易 |
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 |
- <table class="sui-table table-zebra">
- <thead>
- <tr>
- <th>#</th>
- <th>待付款</th>
- <th>宝宝数量</th>
- <th>交易金额</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>所有交易</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>待付款</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>已发货</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>已成功</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- </tbody>
- </table>
- <table class="sui-table table-vzebra">
- <tbody>
- <tr>
- <td>所有交易</td>
- <td>9999.00</td>
- <td>所有交易</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>待付款</td>
- <td>9999.00</td>
- <td>待付款</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>已发货</td>
- <td>9999.00</td>
- <td>已发货</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>已成功</td>
- <td>9999.00</td>
- <td>已成功</td>
- <td>99999.00</td>
- </tr>
- </tbody>
- </table>
水平和垂直的斑马线
# |
待付款 |
宝宝数量 |
交易金额 |
所有交易 |
9999.00 |
999 |
99999.00 |
待付款 |
9999.00 |
999 |
99999.00 |
已发货 |
9999.00 |
999 |
99999.00 |
已成功 |
9999.00 |
999 |
99999.00 |
- <table class="sui-table table-primary">
- <thead>
- <tr>
- <th>#</th>
- <th>待付款</th>
- <th>宝宝数量</th>
- <th>交易金额</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>所有交易</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>待付款</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>已发货</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- <tr>
- <td>已成功</td>
- <td>9999.00</td>
- <td>999</td>
- <td>99999.00</td>
- </tr>
- </tbody>
- </table>
首要表格,颜色接近首要按钮的颜色
- <table class="sui-table table-bordered table-sideheader">
- <thead>
- <tr>
- <th>#</th>
- <th>新客户 uv</th>
- <th>新客户转化率(%)</th>
- <th>老客户 uv</th>
- <th>老客户转化率(%)</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>昨日</td>
- <td>1.0</td>
- <td>1.0</td>
- <td>1.0</td>
- <td>1.0</td>
- </tr>
- <tr>
- <td>前日</td>
- <td>1.0</td>
- <td>0.0</td>
- <td>0.0</td>
- <td>0.0</td>
- </tr>
- <tr>
- <td>前两天</td>
- <td>1.0</td>
- <td>1.0</td>
- <td>0.0</td>
- <td>0.0</td>
- </tr>
- <tr>
- <td>行业平均</td>
- <td>50.73</td>
- <td>0.73</td>
- <td>0.73</td>
- <td>0.73</td>
- </tr>
- <tr>
- <td>当前现状</td>
- <td>低于平均</td>
- <td>持平</td>
- <td>高于平均</td>
- <td>持平</td>
- </tr>
- </tbody>
- </table>
二维表格
- <table class="sui-table table-bordered">
- <thead>
- <tr>
- <th colspan="5">
- <label class="checkbox pull-left">
- <input type="checkbox">订单编号:7867473872181848
- </label><span class="pull-right">成交时间:2014-01-11 11:59</span>
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td width="50%">
- <div class="typographic"><img src="http://img.f2e.taobao.net/img.png_50x50.jpg"><a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a><span>1</span>
- <ul class="unstyled">
- <li>申请售后</li>
- <li>投诉卖家</li>
- </ul>
- </div>
- </td>
- <td rowspan="2" width="11%" class="center">56.50</td>
- <td rowspan="2" width="13%" class="center">
- <ul class="unstyled">
- <li>交易成功</li>
- <li><a href="#">订单详情</a></li>
- <li><a href="#">对方已评</a></li>
- </ul>
- </td>
- <td rowspan="2" width="13%" class="center"><a href="#" class="btn">评价 </a></td>
- <td rowspan="2" width="13%" class="center">
- <ul class="unstyled">
- <li><a href="#">删除</a></li>
- <li><a href="#">标记</a></li>
- <li><a href="#">分享</a></li>
- </ul>
- </td>
- </tr>
- <tr>
- <td width="50%">
- <div class="typographic"><img src="http://img.f2e.taobao.net/img.png_50x50.jpg"><a href="#" class="block-text">包邮 正品玛姬儿压缩面膜无纺布纸膜100粒 送泡瓶面膜刷喷瓶 新款</a><span>1</span>
- <ul class="unstyled">
- <li>申请售后</li>
- <li>投诉卖家</li>
- </ul>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- <table class="sui-table table-bordered-simple">
- <thead>
- <tr>
- <th colspan="7">
- <label class="checkbox">
- <input type="checkbox">
- </label><a href="#">对比海外卖家</a><span class="pull-right gray">合作时间: 2013-05-22起</span>
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td width="20%" class="center">001</td>
- <td width="13%" class="center">
- <ul class="unstyled">
- <li>0 (一个月)</li>
- <li>0 (三个月)</li>
- </ul>
- </td>
- <td width="13%" class="center">
- <ul class="unstyled">
- <li>0 (一个月) </li>
- <li>0 (三个月)</li>
- </ul>
- </td>
- <td width="13%" class="center">0</td>
- <td width="13%" class="center">0.00%</td>
- <td width="13%" class="center">0.00%</td>
- <td class="center">
- <ul class="unstyled">
- <li><a href="#">终止</a></li>
- <li><a href="#">查看分销商品</a></li>
- <li><a href="#">授权</a></li>
- <li><a href="#">授权品牌</a></li>
- <li><a href="#">开通代销</a></li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>