1. 使用基础属性
1.1. 静态表格支持以下基础属性, 可定义不同风格/尺寸的表格样式:
2. 例子
2.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>静态表格 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
<table class="layui-table">
<caption>默认表格</caption>
<colgroup>
<col width="200">
<col width="300">
<col>
</colgroup>
<thead>
<tr>
<th>属性名</th>
<th>属性值</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>lay-even</td>
<td>无</td>
<td>用于开启隔行背景, 可与其它属性一起使用</td>
</tr>
<tr>
<td>lay-skin="属性值"</td>
<td>line(行边框风格)</td>
<td>若使用默认风格不设置该属性即可</td>
</tr>
</tbody>
</table>
<table class="layui-table" lay-skin="line">
<caption>行边框风格表格</caption>
<colgroup>
<col width="200">
<col width="300">
<col>
</colgroup>
<thead>
<tr>
<th>属性名</th>
<th>属性值</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>lay-skin="属性值"</td>
<td>row(列边框风格)</td>
<td>若使用默认风格不设置该属性即可</td>
</tr>
<tr>
<td>lay-skin="属性值"</td>
<td>nob(无边框风格)</td>
<td>若使用默认风格不设置该属性即可</td>
</tr>
</tbody>
</table>
<table class="layui-table" lay-skin="row">
<caption>列边框风格表格</caption>
<colgroup>
<col width="200">
<col width="300">
<col>
</colgroup>
<thead>
<tr>
<th>属性名</th>
<th>属性值</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>lay-size="属性值"</td>
<td>sm(小尺寸)</td>
<td>若使用默认尺寸不设置该属性即可</td>
</tr>
<tr>
<td>lay-size="属性值"</td>
<td>lg(大尺寸)</td>
<td>若使用默认尺寸不设置该属性即可 </td>
</tr>
</tbody>
</table>
<table class="layui-table" lay-skin="nob">
<caption>无边框风格表格</caption>
<colgroup>
<col width="200">
<col width="300">
<col>
</colgroup>
<thead>
<tr>
<th>属性名</th>
<th>属性值</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>lay-even</td>
<td>无</td>
<td>用于开启隔行背景, 可与其它属性一起使用</td>
</tr>
<tr>
<td>lay-skin="属性值"</td>
<td>line(行边框风格)</td>
<td>若使用默认风格不设置该属性即可</td>
</tr>
</tbody>
</table>
<table class="layui-table" lay-size="sm">
<caption>小尺寸表格</caption>
<colgroup>
<col width="200">
<col width="300">
<col>
</colgroup>
<thead>
<tr>
<th>属性名</th>
<th>属性值</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>lay-skin="属性值"</td>
<td>row(列边框风格)</td>
<td>若使用默认风格不设置该属性即可</td>
</tr>
<tr>
<td>lay-skin="属性值"</td>
<td>nob(无边框风格)</td>
<td>若使用默认风格不设置该属性即可</td>
</tr>
</tbody>
</table>
<table class="layui-table" lay-size="lg">
<caption>大尺寸表格</caption>
<colgroup>
<col width="200">
<col width="300">
<col>
</colgroup>
<thead>
<tr>
<th>属性名</th>
<th>属性值</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>lay-size="属性值"</td>
<td>sm(小尺寸)</td>
<td>若使用默认尺寸不设置该属性即可</td>
</tr>
<tr>
<td>lay-size="属性值"</td>
<td>lg(大尺寸)</td>
<td>若使用默认尺寸不设置该属性即可 </td>
</tr>
</tbody>
</table>
<table class="layui-table" lay-even>
<caption>表格隔行背景</caption>
<colgroup>
<col width="200">
<col width="300">
<col>
</colgroup>
<thead>
<tr>
<th>属性名</th>
<th>属性值</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>lay-even</td>
<td>无</td>
<td>用于开启隔行背景, 可与其它属性一起使用</td>
</tr>
<tr>
<td>lay-skin="属性值"</td>
<td>line(行边框风格)</td>
<td>若使用默认风格不设置该属性即可</td>
</tr>
</tbody>
</table>
</body>
</html>2.2. 效果图
