主要属性:
全屏宽度带水平线的表格 .table
带边框的表格 .table-bordered
条纹状表格 .table-striped
悬停变色表格 .table-hover
紧凑风格表格 .table-condensed

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body> <table class="table" table-striped table-hover> <thead> <tr class="danger"> <th>标题一</th> <th>标题二</th> <th>标题三</th> <th>标题四</th> <th>标题五</th> </tr> </thead> <tbody> <tr class="warning"> <td>内容一</td> <td>内容二</td> <td>内容三</td> <td>内容四</td> <td>内容五</td> </tr> <tr class="success"> <td>内容一</td> <td>内容二</td> <td>内容三</td> <td>内容四</td> <td>内容五</td> </tr> <tr class="active"> <td>内容一</td> <td>内容二</td> <td>内容三</td> <td>内容四</td> <td>内容五</td> </tr> </tbody> </table> <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript" src="js/bootstrap.min.js" ></script> </body> </html>
效果图片: