<!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>