阅读(2672) (15)

Bootstrap边框表格

2016-09-07 19:26:37 更新

通过添加 .table-bordered class,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:


<!DOCTYPE html>  
<html>  
<head>  
   <title>Bootstrap 实例 - 边框表格</title>  
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">  
   <script src="/scripts/jquery.min.js"></script>  
   <script src="/bootstrap/js/bootstrap.min.js"></script>  
</head>  
<body>  
  
<table class="table table-bordered">  
   <caption>边框表格布局</caption>  
   <thead>  
      <tr>  
         <th>名称</th>  
         <th>城市</th>  
         <th>密码</th>  
      </tr>  
   </thead>  
   <tbody>  
      <tr>  
         <td>Tanmay</td>  
         <td>Bangalore</td>  
         <td>560001</td>  
      </tr>  
      <tr>  
         <td>Sachin</td>  
         <td>Mumbai</td>  
         <td>400003</td>  
      </tr>  
      <tr>  
         <td>Uma</td>  
         <td>Pune</td>  
         <td>411027</td>  
      </tr>  
   </tbody>  
</table>  
  
</body>  
</html>  


结果如下所示:
边框表格