表格
展示行列数据。
规则
- 当有大量的结构化数据需要展现时，eg：体检单信息。
- 中英文左对齐，数值右对齐。
- 一般不建议超过 4 列。
代码演示
表格
横向
| 检查项目 | 结果 | 参考值 |
|---|---|---|
| 酸碱度 | 6.5 | 4.5-8.0 |
| 镜检红细胞 | 0 | 4-8.0 |
| 镜检白细胞 | 6 | 4-8 |
横向滚动
| 姓名 | 性别 | 身高 | 体重 | 年龄 | 职称 | 地址 | 电话 |
|---|---|---|---|---|---|---|---|
| 叶问 | 男 | 180cm | 75kg | 24 | 主任医师 | 大时代 | 佛山 |
| 叶旦 | 女 | 165cm | 52kg | 24 | 副主任医师 | 大时代 | 斯达夫 |
纵向
| 检查项目 | 酸碱度 | 红细胞 | 镜检白细胞 |
|---|---|---|---|
| 结果 | 6.5 | 4.5-8.0 | 0 |
| 参考值 | 4.5-8.0 | 0 | 4-8.0 |
混合
| 姓名 | 性别 | 职称 | |
|---|---|---|---|
| 医生一 | 董嘉俊 | 男 | 主任医师 |
| 医生二 | 李东 | 男 | 主任医师 |
| 医生三 | 亚默 | 女 | 副主任医师 |
锁定标题栏
| 检查项目 |
|---|
| 结果 |
| 参考值 |
| 检查项目 | 镜检白细胞 | 镜检红细胞 | 血细胞 | 血小板 | 血常规 | 亚硝酸盐还原试验 |
|---|---|---|---|---|---|---|
| 结果 | 4.5-8.0 | 0 | 4-8.0 | 4.5-8.0 | 0 | 4-8.0 |
| 参考值 | 6 | 4-8 | 0 | 4.5-8.0 | 0 | 4-8.0 |
单元格右对齐
| 检查项目 | 酸碱度 | 红细胞 | 白细胞 |
|---|---|---|---|
| 结果 | 6.5 | 4.5-8.0 | 0 |
| 参考值 | 4.5-8.0 | 0 | 4-8.0 |
数据标识
| 酸碱度 | 红细胞 | 白细胞 | |
| 结果 | 6.0 | 6.5 | 0 |
| 参考值 | 0.33 | 4.5-8.0 | 4-8.0 |
| 白细胞 | 8 | 4-8 | 0 |
排版表格
医生排班
01月09日 - 01月16日
|
今天
01-09
|
明天
01-10
|
后天
01-11
|
周四
01-12
|
周五
01-13
|
周六
01-14
|
周日
01-15
|
||
|---|---|---|---|---|---|---|---|---|
| 上午 |
预约
¥ 12.00
|
已满 | ||||||
| 下午 |
预约
¥ 12.00
|
已满 |
横向
默认宽度100%，推荐使用col来自定义表格列的宽度
<div class="table-wrapper">
<table class="table">
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<th>检查项目</th>
<th>结果</th>
<th>参考值</th>
</tr>
<tr>
<td>酸碱度</td>
<td>6.5</td>
<td>4.5-8.0</td>
</tr>
<tr>
<td>镜检红细胞</td>
<td>0</td>
<td>4-8.0</td>
</tr>
<tr>
<td>镜检白细胞</td>
<td>6</td>
<td>4-8</td>
</tr>
</tbody>
</table>
</div>横向滚动
为table添加类.table-fixed来得到一个可以横向滚动的表格，同样需要引用着自行定义宽度
<div class="table-wrapper">
<table class="table table-fixed">
<colgroup>
<col style="width:60px;">
<col style="width:80px;">
<col style="width:80px;">
<col style="width:80px;">
<col style="width:80px;">
<col style="width:100px;">
<col style="width:80px;">
<col style="width:100px;">
</colgroup>
<tbody>
<tr>
<th>姓名</th>
<th>性别</th>
<th>身高</th>
<th>体重</th>
<th>年龄</th>
<th>职称</th>
<th>地址</th>
<th>电话</th>
</tr>
<tr>
<td>叶问</td>
<td>男</td>
<td>180cm</td>
<td>75kg</td>
<td>24</td>
<td>主任医师</td>
<td>大时代</td>
<td>佛山</td>
</tr>
<tr>
<td>叶旦</td>
<td>女</td>
<td>165cm</td>
<td>52kg</td>
<td>24</td>
<td>副主任医师</td>
<td>大时代</td>
<td>斯达夫</td>
</tr>
</tbody>
</table>
</div>纵向
<div class="table-wrapper">
<table class="table">
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<th>检查项目</th>
<td>酸碱度</td>
<td>红细胞</td>
<td>镜检白细胞</td>
</tr>
<tr>
<th>结果</th>
<td>6.5</td>
<td>4.5-8.0</td>
<td>0</td>
</tr>
<tr>
<th>参考值</th>
<td>4.5-8.0</td>
<td>0</td>
<td>4-8.0</td>
</tr>
</tbody>
</table>
</div>混合
<div class="table-wrapper">
<table class="table">
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody> <tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>职称</th>
</tr>
<tr>
<th>医生一</th>
<td>董嘉俊</td>
<td>男</td>
<td>主任医师</td>
</tr>
<tr>
<th>医生二</th>
<td>李东</td>
<td>男</td>
<td>主任医师</td>
</tr>
<tr>
<th>医生三</th>
<td>亚默</td>
<td>女</td>
<td>副主任医师</td>
</tr>
</tbody>
</table>
</div>锁定标题栏
通过定义table-fixed-left 、table-scroll的col项来保持锁定标题栏的对齐
<div class="table-wrapper">
<div class="table-scroll-position-left">
<div class="table-fixed-left">
<table class="table ">
<colgroup>
<col style="width:100px;">
</colgroup>
<tbody>
<tr>
<th>检查项目</th>
</tr>
<tr>
<th>结果</th>
</tr>
<tr>
<th>参考值</th>
</tr>
</tbody>
</table>
</div>
<div class="table-scroll">
<table class="table table-fixed">
<colgroup>
<col style="width:100px;">
<col style="width:100px;">
<col style="width:120px;">
<col style="width:120px;">
<col style="width:120px;">
<col style="width:120px;">
<col style="width:150px;">
</colgroup>
<tbody>
<tr>
<th>检查项目</th>
<td>镜检白细胞</td>
<td>镜检红细胞</td>
<td>血细胞</td>
<td>血小板</td>
<td>血常规</td>
<td>亚硝酸盐还原试验</td>
</tr>
<tr>
<th>结果</th>
<td>4.5-8.0</td>
<td>0</td>
<td>4-8.0</td>
<td>4.5-8.0</td>
<td>0</td>
<td>4-8.0</td>
</tr>
<tr>
<th>参考值</th>
<td>6</td>
<td>4-8</td>
<td>0</td>
<td>4.5-8.0</td>
<td>0</td>
<td>4-8.0</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>单元格对齐
UI建议，数字列右对齐，可以为td、th 添加类item-right 满足右对齐需求
<div class="table-wrapper">
<table class="table">
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<th>检查项目</th>
<td class="item-right">酸碱度</td>
<td class="item-right">红细胞</td>
<td class="item-right">镜检白细胞</td>
</tr>
<tr>
<th>结果</th>
<td class="item-right">6.5</td>
<td class="item-right">4.5-8.0</td>
<td class="item-right">0</td>
</tr>
<tr>
<th>参考值</th>
<td class="item-right">4.5-8.0</td>
<td class="item-right">0</td>
<td class="item-right">4-8.0</td>
</tr>
</tbody>
</table>
</div>数据标识
提供升，降两种数据标识。
<div class="table-wrapper">
<table class="table">
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<th></th>
<td class="item-right">酸碱度</td>
<td class="item-right">镜检红细胞</td>
<td class="item-right">镜检白细胞</td>
</tr>
<tr>
<th>结果</th>
<td class="item-right table-down">
<span>6.0</span>
<span class="table-down-icon"></span>
</td>
<td class="item-right">6.5</td>
<td class="item-right">0</td>
</tr>
<tr>
<th>参考值</th>
<td class="item-right table-down">
<span>0.33</span>
<span class="table-down-icon"></span>
</td>
<td class="item-right">4.5-8.0</td>
<td class="item-right">4-8.0</td>
</tr>
<tr>
<th>镜检白细胞</th>
<td class="item-right table-up">
<span>8</span>
<span class="table-up-icon"></span>
</td>
<td class="item-right">4-8</td>
<td class="item-right">0</td>
</tr>
</tbody>
</table>
</div>
排班表格
私有表格，仅仅用于排班的情况
<div class="panel">
<div class="panel-title">医生排班</div>
<div class="table-rostering">
<div class="table-title">01月09日 - 01月16日</div>
<div class="table-wrapper">
<table class="table table-fixed">
<tbody>
<tr>
<th class="th-head"></th>
<th>
<div>今天</div>
<div>01-09</div>
</th>
<th>
<div>明天</div>
<div>01-10</div>
</th>
<th>
<div>后天</div>
<div>01-11</div>
</th>
<th>
<div>周四</div>
<div>01-12</div>
</th>
<th>
<div>周五</div>
<div>01-13</div>
</th>
<th>
<div>周六</div>
<div>01-14</div>
</th>
<th>
<div>周日</div>
<div>01-15</div>
</th>
</tr>
<tr>
<th>上午</th>
<td></td>
<td class="rostering-had">
<div>预约</div>
<div>
<span class="txt-size-sm">¥ </span>12.<span class="txt-size-sm">00</span>
</div>
</td>
<td></td>
<td></td>
<td class="rostering-full">已满</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>下午</th>
<td></td>
<td class="rostering-had">
<div>预约</div>
<div>
<span class="txt-size-sm">¥ </span>12.<span class="txt-size-sm">00</span>
</div>
</td>
<td></td>
<td></td>
<td class="rostering-full">已满</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>