文档

Mocha使用好帮手

table(表格样式)

作者：kevinhehe
版本：v.1
依赖：mocha.css

点击运行Demo

样式1 .mocha-table-scheme1

标题标题标题
内容内容内容内容内容内容内容内容
内容内容内容内容内容
内容内容内容内容内容
内容内容内容内容内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table class="mocha-table mocha-table-scheme1 mocha-table-skin1">
    <tr>
        <th>标题</th>
        <th>标题</th>
        <th>标题</th>
    </tr>
    <tr>
        <td>内容</td>
        <td>内容内容内容内容内容内容</td>
        <td>内容</td>
    </tr>
    <tr>
        <td>内容</td>
        <td>内容内容内容</td>
        <td>内容</td>
    </tr>
    <tr>
        <td>内容</td>
        <td>内容内容内容</td>
        <td>内容</td>
    </tr>
    <tr>
        <td>内容</td>
        <td>内容内容内容</td>
        <td>内容</td>
    </tr>
</table>

修改模块皮肤CSS

模块的默认皮肤类.mocha-table-skin1，您可以在您项目的page.css里修改.mocha-table-skin1皮肤类，或者新增.mocha-table-skin2。

1
2
3
4
5
/* skin */
.mocha-table-skin1{font-size: .16rem;color: #000;}
.mocha-table-skin1 th{background-color: #1b1b1b;color: #fff;}
.mocha-table-skin1 tr:nth-child(odd){background-color: #bbb;}
.mocha-table-skin1 tr:nth-child(even){background-color: #fff;}