表格Table

Order Order Date Price Username Status
A012016032402 2016/3/24 $338.39 Aaron Unpaid
A012016032402 2016/3/24 $338.39 Cary Unpaid
A012016032402 2016/3/24 $338.39 Evan Unpaid
A012016032402 2016/3/24 $338.39 Justin Unpaid
A012016032402 2016/3/24 $338.39 Lorin Unpaid
<table class="table">
    <thead>
        <tr>
            <th>Order Date</th>
            <th>Price</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2016/3/24</td>
            <td>$338.39</td>
            <td>Aaron</td>
        </tr>
        <tr>
            <td>2016/3/24</td>
            <td>$338.39</td>
            <td>Cary</td>
        </tr>
    </tbody>
</table>

响应式隐藏Responsive hide

通过隐藏样式自由设定列隐藏

<table class="table">
    <thead>
        <tr>
            <th>Order Date</th>
            <th class="hide-s">Price</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2016/3/24</td>
            <td class="hide-s">$338.39</td>
            <td>Aaron</td>
        </tr>
        <tr>
            <td>2016/3/24</td>
            <td class="hide-s">$338.39</td>
            <td>Cary</td>
        </tr>
    </tbody>
</table>

响应式滚动Responsive scroll

添加父级元素<div class="table-scroll">,表格根据内容是否溢出自动隐藏并显示滚动条

<div class="table-scroll">
    <table class="table">
        ...
    </table>
</div>

添加class="nowrap",表格内容将不会进行换行

Order Order Date Product Information Price Username Status
A012016032402 2016/3/24 This Dad Does Diapers, Cool Fathers Day New Dad Men's V-Neck T-Shirt,Color:Black,Size:S,Qty:1 $338.39 Aaron Unpaid
A012016032402 2016/3/24 This Dad Does Diapers, Cool Fathers Day New Dad Men's V-Neck T-Shirt,Color:Black,Size:S,Qty:1 $338.39 Cary Unpaid
A012016032402 2016/3/24 This Dad Does Diapers, Cool Fathers Day New Dad Men's V-Neck T-Shirt,Color:Black,Size:S,Qty:1 $338.39 Evan Unpaid
<div class="table-scroll nowrap">
    <table class="table">
        ...
    </table>
</div>

合并Merge

Order Order Date Price Username Status
A012016032402 2016/3/24 $338.39 Aaron Unpaid
2016/3/24 $338.39 Cary Unpaid
A012016032402 2016/3/24 $338.39 Evan Unpaid
A012016032402 2016/3/24 $338.39 Justin Unpaid
A012016032402 $338.39 Lorin Unpaid
<table class="table border">
    <thead>
        <tr>
            <th>Order Date</th>
            <th>Price</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">2016/3/24</td>
            <td>$338.39</td>
            <td>Aaron</td>
        </tr>
        <tr>
            <td>$338.39</td>
            <td>Cary</td>
        </tr>
        <tr>
            <td colspan="2">A012016032402</td>
            <td>Lorin</td>
        </tr>
    </tbody>
</table>

边框Border

添加class="border"增加边框效果

Order Order Date Price Username Status
A012016032402 2016/3/24 $338.39 Aaron Unpaid
A012016032402 2016/3/24 $338.39 Cary Unpaid
A012016032402 2016/3/24 $338.39 Evan Unpaid
A012016032402 2016/3/24 $338.39 Justin Unpaid
A012016032402 2016/3/24 $338.39 Lorin Unpaid
<table class="table border">           
    ...
</table>

无边框No border

添加class="noborder"去除边框效果

Order Order Date Price Username Status
A012016032402 2016/3/24 $338.39 Aaron Unpaid
A012016032402 2016/3/24 $338.39 Cary Unpaid
A012016032402 2016/3/24 $338.39 Evan Unpaid
A012016032402 2016/3/24 $338.39 Justin Unpaid
A012016032402 2016/3/24 $338.39 Lorin Unpaid
<table class="table noborder">           
    ...
</table>

颜色Color

<tr>元素添加class属性,可添加图标及徽章,更多颜色属性请至属性中查询

Order Order Date Price Username Status
A012016032402 2016/3/24 $338.39 Aaron Unpaid
A012016032402 2016/3/24 $338.39 Cary Unpaid
A012016032402 2016/3/24 $338.39 Evan Unpaid
A012016032402 2016/3/24 $338.39 Justin Unpaid
A012016032402 2016/3/24 $338.39 Lorin Unpaid
<table class="table noborder">           
    <thead>
        <tr class="bg-333 c-fff" style="border-bottom:0;">
            ...
        </tr>
    </thead>
    <tbody>
        <tr class="bg-red c-fff">
            ...
        </tr>
        <tr class="bg-orange c-fff">
            ...
        </tr>
    </tbody>
</table>

条纹Striped

添加class="striped"增加条纹式背景

Order Order Date Price Username Status
A012016032402 2016/3/24 $338.39 Aaron Unpaid
A012016032402 2016/3/24 $338.39 Cary Unpaid
A012016032402 2016/3/24 $338.39 Evan Unpaid
A012016032402 2016/3/24 $338.39 Justin Unpaid
A012016032402 2016/3/24 $338.39 Lorin Unpaid
<table class="table striped">           
    ...
</table>

滑动Hover

添加class="hover"增加滑鼠背景色效果

Order Order Date Price Username Status
A012016032402 2016/3/24 $338.39 Aaron Unpaid
A012016032402 2016/3/24 $338.39 Cary Unpaid
A012016032402 2016/3/24 $338.39 Evan Unpaid
A012016032402 2016/3/24 $338.39 Justin Unpaid
A012016032402 2016/3/24 $338.39 Lorin Unpaid
<table class="table hover">           
    ...
</table>