<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>table</title>
<!-- <link rel="stylesheet" href="../css/bootstrap.css"> -->
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
body{
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,STHeiti,"Microsoft Yahei",sans-serif;
}
table thead{
background-color: #555;
border-top: 1px solid #555;
}
table thead tr{
color: #fff;
}
.table > thead > tr > th{
border-left: 1px solid #555;
border-right: 1px solid #555;
border-bottom: 1px solid #555;
}
</style>
<body>
<div class="container">
<br><br>
<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th>类</th>
<th>描述</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>.table</td>
<td>为任意<table>添加基本样式 (只有横向分隔线)</td>
<td>null</td>
</tr>
<tr>
<td>.table-bordered</td>
<td>为所有表格的单元格添加边框</td>
<td>null</td>
</tr>
<tr>
<td>.table-hover</td>
<td>在 <tbody>内的任一行启用鼠标悬停状态</td>
<td>null</td>
</tr>
<tr>
<td>.table-condensed</td>
<td>让表格更加紧凑</td>
<td>null</td>
</tr>
</tbody>
</table>
<br><br>
<table class="table table-bordered">
<thead>
<tr>
<th>类</th>
<th>描述</th>
<th>示例</th>
</tr>
</thead>
<tr class="active">
<td>.active</td>
<td>将悬停的颜色应用在行或者单元格上</td>
<td>null</td>
</tr>
<tr class="success">
<td>.success</td>
<td>表示成功的操作</td>
<td>null</td>
</tr>
<tr class="info">
<td>.info</td>
<td>表示信息变化的操作</td>
<td>null</td>
</tr>
<tr class="warning">
<td>.warning</td>
<td>表示一个警告的操作</td>
<td>null</td>
</tr>
<tr class="danger">
<td>.danger</td>
<td>表示一个危险的操作</td>
<td>null</td>
</tr>
</table>
</div>
</body>
</html>
