Bootstrap 表格


Bootstrap 提供了一個清晰的建立表格的佈局。下表列出了Bootstrap 支援的一些表格元素：

##<table> ;為表格新增基礎樣式。 <thead>表格標題行的容器元素（<tr>），用來識別表格列。 <tbody>表格主體中的表格行的容器元素（<tr>）。 <tr>一組出現在單行上的表格單元格的容器元素（<td> 或 <th>）。 <td>預設的表格儲存格。 <th>特殊的表格單元格，用來識別列或行（取決於範圍和位置）。必須在 <thead> 內使用。 <caption>關於表格儲存內容的說明或摘要。
#標籤描述
表格類別

下表樣式可用來表格中：

類描述實例.table#為任意<table> 新增基本樣式(只有橫向分隔線)試試看.table-striped在<tbody> 內加入斑馬線形式的條紋( IE8 不支援)試試看.table-bordered為所有表格的儲存格新增邊框試試看.table-hover在<tbody> 內的任一行啟用滑鼠懸停狀態試試看.table- condensed讓表格更加緊湊嘗試嘗試一下
#聯合使用所有表格類別
<tr>, <th> 和<td> 類別

下表的類別可用於表格的行或儲存格：

類別描述實例.active#將懸停的顏色應用在行或單元格上嘗試#.success表示成功的操作嘗試一下.info表示資訊變更的操作#試試看##.warning.danger

基本的表格

如果您想要一個只帶有內邊距（padding）和水平分割的基本表，請新增class .table，如下列實例所示：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 基本的表格</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
   <caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 基本的表格</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
   <caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>

#運行實例»

點擊"運行實例"按鈕查看線上實例

可選的表格類別

除了基本的表格標記和.table class，還有一些可以用來為標記定義樣式的類別。下面將向您介紹這些類別。

條紋表格

透過新增.table-striped class，您將在<tbody> 內的行上看到條紋，如下面的實例所示： 

实例
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 条纹表格</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-striped">
	<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>

邊框表格

透過新增.table-bordered class，您將看到每個元素周圍都有邊框，且佔整個表格是圓角的，如下面的實例所示：

实例
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 边框表格</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/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>

懸停錶格

透過新增.table-hover class，當指標停留在行上時會出現淺灰色背景，如下面的實例所示：

实例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 悬停表格</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-hover">
   <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>

精簡表格

透過新增.table-condensed class，行內邊距（padding）被切為兩半，以便讓表看起來更緊湊，如下面的實例所示。這在想讓資訊看起來更緊湊時非常有用。 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 精简表格</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-condensed">
   <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>

上下文類別

下表中所列出的上下文類別可讓您改變表格行或單一儲存格的背景顏色。

表示一個警告的操作嘗試
表示一個危險的動作#試試
類別描述
#.active對某一特定的行或單元格應用懸停顏色
.success表示一個成功的或積極的動作
.warning表示一個需要注意的警告
.danger表示一個危險的或潛在的負面動作

這些類別可應用到<tr>、<td> 或<th>。 

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 上下文类</title>
  <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
   <caption>上下文表格布局</caption>
   <thead>
      <tr>
         <th>产品</th>
         <th>付款日期</th>
         <th>状态</th>
      </tr>
   </thead>
   <tbody>
      <tr class="active">
         <td>产品1</td>
         <td>23/11/2013</td>
         <td>待发货</td>
      </tr>
      <tr class="success">
         <td>产品2</td>
         <td>10/11/2013</td>
         <td>发货中</td>
      </tr>
      <tr  class="warning">
         <td>产品3</td>
         <td>20/10/2013</td>
         <td>待确认</td>
      </tr>
      <tr  class="danger">
         <td>产品4</td>
         <td>20/10/2013</td>
         <td>已退货</td>
      </tr>
   </tbody>
</table>

</body>
</html>

響應式表格

透過把任意的.table 包在.table-responsive class 內，您可以讓表格水平滾動以適應小型裝置（小於768px）。當在大於 768px 寬的大型設備上查看時，您將看不到任何的差異。

實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 响应式表格</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="table-responsive">
   <table class="table">
      <caption>响应式表格布局</caption>
      <thead>
         <tr>
            <th>产品</th>
            <th>付款日期</th>
            <th>状态</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>产品1</td>
            <td>23/11/2013</td>
            <td>待发货</td>
         </tr>
         <tr>
            <td>产品2</td>
            <td>10/11/2013</td>
            <td>发货中</td>
         </tr>
         <tr>
            <td>产品3</td>
            <td>20/10/2013</td>
            <td>待确认</td>
         </tr>
         <tr>
            <td>产品4</td>
            <td>20/10/2013</td>
            <td>已退货</td>
         </tr>
      </tbody>
   </table>
</div>  	

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例