107 lines
2.0 KiB
HTML
107 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>静态表格 - layui</title>
|
|
|
|
<link rel="stylesheet" href="../src/css/layui.css">
|
|
<style>
|
|
body {padding: 32px;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="layui-btn-container">
|
|
<a href="table.html" class="layui-btn">表格综合</a>
|
|
<a href="table-test.html" class="layui-btn">表格操作</a>
|
|
<a href="table-static.html" class="layui-btn layui-btn-primary layui-border-green">静态表格</a>
|
|
</div>
|
|
|
|
<table class="layui-table">
|
|
<colgroup>
|
|
<col width="150">
|
|
<col width="150">
|
|
<col>
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>人物</th>
|
|
<th>民族</th>
|
|
<th>格言</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>孔子</td>
|
|
<td>华夏</td>
|
|
<td>有朋至远方来，不亦乐乎</td>
|
|
</tr>
|
|
<tr>
|
|
<td>孟子</td>
|
|
<td>华夏</td>
|
|
<td>穷则独善其身，达则兼济天下</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<table class="layui-table" lay-size="sm">
|
|
<colgroup>
|
|
<col width="150">
|
|
<col width="150">
|
|
<col>
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>人物</th>
|
|
<th>民族</th>
|
|
<th>格言</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>孔子</td>
|
|
<td>华夏</td>
|
|
<td>有朋至远方来，不亦乐乎</td>
|
|
</tr>
|
|
<tr>
|
|
<td>孟子</td>
|
|
<td>华夏</td>
|
|
<td>穷则独善其身，达则兼济天下</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<table class="layui-table" lay-size="lg">
|
|
<colgroup>
|
|
<col width="150">
|
|
<col width="150">
|
|
<col>
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>人物</th>
|
|
<th>民族</th>
|
|
<th>格言</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>孔子</td>
|
|
<td>华夏</td>
|
|
<td>有朋至远方来，不亦乐乎</td>
|
|
</tr>
|
|
<tr>
|
|
<td>孟子</td>
|
|
<td>华夏</td>
|
|
<td>穷则独善其身，达则兼济天下</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |