codecamp

Bootstrap边框表格

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


结果如下所示:
边框表格
Bootstrap的斑马线
Bootstrap的紧凑型表格
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }