@ustack/uskin
Version:
A graceful framework which provides developers another chance to build an amazing site.
151 lines (148 loc) • 4.85 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Table Sample</title>
<link href="../../dist/css/uskin.css" rel="stylesheet">
</head>
<body>
<div style="margin: 20px auto; width: 600px;">
<table class="table table-striped table-hover">
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>Category</th>
<th>Flavor</th>
<th>CPU</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>Micro</td>
<td>Micro-1</td>
<td>1</td>
<td class="orange">¥0.056</td>
</tr>
<tr class="selected">
<td><input type="checkbox" /></td>
<td>Standard</td>
<td>Standard-1</td>
<td>4</td>
<td class="orange">¥0.444</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Micro</td>
<td>Micro-1</td>
<td>1</td>
<td class="orange">¥0.056</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Standard</td>
<td>Standard-1</td>
<td>4</td>
<td class="orange"><strong>¥0.444</strong></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Micro</td>
<td>Micro-1</td>
<td>1</td>
<td class="orange">¥0.056</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Standard</td>
<td>Standard-1</td>
<td>4</td>
<td class="orange">¥0.444</td>
</tr>
</tbody>
</table>
<div class="table table-striped table-hover" style="margin-top: 20px;">
<div class="table-header">
<div><input type="checkbox" /></div>
<div>Name</div>
<div>UUID</div>
<div>Category</div>
<div>Description</div>
</div>
<div class="table-body">
<div class="row">
<div><input type="checkbox" /></div>
<div>Yao Lee</div>
<div>2caeb534-46a1-46f1-8582-8a35cfe0fc39</div>
<div>Vegetable</div>
<div>This is copied by the handsome.</div>
</div>
<div class="row selected">
<div><input type="checkbox" /></div>
<div>Yao Lee</div>
<div>2caeb534-46a1-46f1-8582-8a35cfe0fc39</div>
<div>Vegetable</div>
<div>This is copied by the handsome.</div>
</div>
<div class="row">
<div><input type="checkbox" /></div>
<div>Yao Lee</div>
<div>2caeb534-46a1-46f1-8582-8a35cfe0fc39</div>
<div>Vegetable</div>
<div>This is copied by the handsome.</div>
</div>
<div class="row">
<div><input type="checkbox" /></div>
<div>Yao Lee</div>
<div>2caeb534-46a1-46f1-8582-8a35cfe0fc39</div>
<div>Vegetable</div>
<div>This is copied by the handsome.</div>
</div>
<div class="row">
<div><input type="checkbox" /></div>
<div>Yao Lee</div>
<div>2caeb534-46a1-46f1-8582-8a35cfe0fc39</div>
<div>Vegetable</div>
<div>This is copied by the handsome.</div>
</div>
<div class="row">
<div><input type="checkbox" /></div>
<div>Yao Lee</div>
<div>2caeb534-46a1-46f1-8582-8a35cfe0fc39</div>
<div>Vegetable</div>
<div>This is copied by the handsome.</div>
</div>
</div>
<div class="table-footer">
</div>
</div>
<div class="table table-mini table-hover" style="margin-top: 20px;">
<div class="table-header">
<div><input type="checkbox" /></div>
<div>Name</div>
<div>UUID</div>
<div>Category</div>
<div>Description</div>
</div>
<div class="table-body">
<div class="row">
<div><input type="checkbox" /></div>
<div>Yao Lee</div>
<div>2caeb534-46a1-46f1-8582-8a35cfe0fc39</div>
<div>Vegetable</div>
<div>This is copied by the handsome.</div>
</div>
<div class="row">
<div><input type="checkbox" /></div>
<div>Yao Lee</div>
<div>2caeb534-46a1-46f1-8582-8a35cfe0fc39</div>
<div>Vegetable</div>
<div>This is copied by the handsome.</div>
</div>
</div>
</div>
</div>
</body>
</html>