表格Table

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

响应式隐藏Responsive Hide

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

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

响应式滚动Responsive Scroll

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

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

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

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

合并Merge

<table class="table border">
    <thead>
        <tr>
            <th>Order</th>
            <th>Order Date</th>
            <th>Price</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">A012016032402</td>
            <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>
        <tr>
            <td>A012016032402</td>
            <td>2016/3/24</td>
            <td>$338.39</td>
            <td>Justin</td>
        </tr>
        <tr>
            <td colspan="2">A012016032402</td>
            <td>$338.39</td>
            <td>Lorin</td>
        </tr>
    </tbody>
</table> 

边框Border

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

<table class="table border">           
    ...
</table>

无边框Not border

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

<table class="table notborder">           
    ...
</table>

条纹Striped

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

<table class="table striped">           
    ...
</table>

滑动Hover

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

<table class="table hover">           
    ...
</table>

自定义风格Custom Style

可以使用自定义风格工具快速创建CSS

<table class="table hover mystyle">
    ...
</table>