Bootstrap邊框表格

2019-08-14 17:49 更新

通過添加 .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>  


結(jié)果如下所示：
邊框表格
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號