常规用法


class加上 color 可以实现隔行变色
color1表示奇数行着色、color2表示偶数行着色,如:class="table color2"

默认鼠标滑过时,当前行会变色
class加上 unhover 可以不变色:class="table unhover"

class加上 th-center td-center 可以让内容居中:class="table th-center td-center"

class加上 no-vertical-line 可以去除竖线
class加上 no-cross-line 可以去除横线
class加上 no-border-line 可以去边框线
class加上 no-line 可以去除竖线、横线、边框线

标题

序号 市区 省区 国别
1 苏州 江苏省 中国
2 无锡 江苏省 中国
3 常州 江苏省 中国
代码
<!--主体内容-->
<div class="list-content">
	<!--块元素-->
	<div class="block">
		<!--页面有多个表格时,可以用于标识表格-->
		<h2>标题</h2>
		<!--右上角的返回按钮-->
		<a href="javascript:history.back();">
			<button class="button wathet" style="position: absolute;right: 20px;top: 16px;"><span class="icon-arrow_back"></span> 返回</button>
		</a>
		
		<!--正文内容-->
		<div class="main">
			<!--表格上方的搜索操作-->
			<div class="admin-search">
				<div class="input-group">
					<input type="text" class="text" placeholder="提示信息" />
					<button class="button blue">搜索</button>
				</div>
			</div>
			
			<!--表格上方的操作元素,添加、删除等-->
			<div class="operation-wrap">
				<div class="buttons-wrap">
					<button class="button blue"><span class="icon-plus"></span> 添加</button>
					<button class="button red"><span class="icon-remove"></span> 删除</button>
				</div>
			</div>
			<table id="table" class="table color2">
				<thead>
					<tr>
						<th class="checkbox"><input type="checkbox" class="fill listen-1" /> </th>
						<th>序号</th>
						<th>市区</th>
						<th>省区</th>
						<th>国别</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="checkbox"><input type="checkbox" class="fill listen-1-2" /> </td>
						<td>1</td>
						<td>苏州</td>
						<td>江苏省</td>
						<td>中国</td>
					</tr>
					<tr>
						<td class="checkbox"><input type="checkbox" class="fill listen-1-2" /> </td>
						<td>2</td>
						<td>无锡</td>
						<td>江苏省</td>
						<td>中国</td>
					</tr>
					<tr>
						<td class="checkbox"><input type="checkbox" class="fill listen-1-2" /> </td>
						<td>3</td>
						<td>常州</td>
						<td>江苏省</td>
						<td>中国</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>