1. 应用外观

    1. 使用前

      表头 表头 表头 表头
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      <div class="c_table">
      	<table>
      		<thead>
      			<tr>
      				<th>表头</th>
      			</tr>
      		</thead>
      		<tbody>
      			<tr>
      				<td>单元格</td>
      			</tr>
      		</tbody>
      	</table>
      </div>
      
    2. 使用后

      表头 表头 表头 表头
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      <div class="c_scroll" style="height:200px;">
      	<div class="c_table">
      		<table>
      			<thead>
      				<tr>
      					<th>表头</th>
      				</tr>
      			</thead>
      			<tbody>
      				<tr>
      					<td>单元格</td>
      				</tr>
      			</tbody>
      		</table>
      	</div>
      </div>
      

      【注】滚动条组件高度请根据自己的需要自定义,定义方法:style="height:300px;"

  2. 扩展外观

    1. 横向滚动条

      表头 表头 表头 表头 表头 表头 表头 表头 表头 表头 表头 表头
      单元格单元格单元格单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格 单元格
      <div class="c_scroll c_scroll-x">
      	...
      </div>
      
    2. 特定滚动条高度

      为方便设置表格的滚动条高度,比如 “可视部分为十行”,特提供了 c_scroll-table-10 这样的样式参数,可以更方便地为表格组件设置滚动条高度,支持 5、10、15、20,如设置了滚动条的表格,则不需要再为 c_table 设置 c_table-row-10。

      表头 表头 表头 表头
      1 单元格 单元格 单元格
      2 单元格 单元格 单元格
      3 单元格 单元格 单元格
      4 单元格 单元格 单元格
      5 单元格 单元格 单元格
      6 单元格 单元格 单元格
      7 单元格 单元格 单元格
      8 单元格 单元格 单元格
      9 单元格 单元格 单元格
      10 单元格 单元格 单元格
      11 单元格 单元格 单元格
      12 单元格 单元格 单元格
      <div class="c_scroll c_scroll-table-10">
      	...
      </div>
      

      同时还支持 c_form 组件的高度:c_scroll-form-5,支持 5、10、15

      • 客户姓名:
      • 出生年月:
      • 修改日期:
      • 年龄:
      • 地址:
      • 手机号码:
      • 邮箱地址:
      • 上传附件:
      • 关联客户:
      • 备注:
      <div class="c_scroll c_scroll-form-5">
      	...
      </div>