<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title></title> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <!-- 表格案列 条纹状表格为类table-striped，table-bordered为表格添加边框 table-condensed表示紧缩表格--> <div class="table-responsive"> <table class="table table-striped table-bordered table-hover table-condensed"> <caption>表格标题</caption> <thead> <tr class="active"> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Your Name</th> </tr> </thead> <tbody> <tr class="success"> <td>111</td> <td>mark</td> <td>jack</td> <td>cccc</td> </tr> <tr class="info"> <td>2222</td> <td>mark</td> <td>jack</td> <td>cccc</td> </tr> <tr class="info"> <td>3333</td> <td>mark</td> <td>jack</td> <td>cccc</td> </tr> </tbody> </table> </div> <!-- 实现表格的自适应只需要添加包含table类的table-responsive类即可！ --> </body> </html>