ブートストラップテーブル

Bootstrap は、テーブルを作成するための明確なレイアウトを提供します。次の表に、Bootstrap でサポートされているいくつかのテーブル要素を示します。

内で使用する必要があります。

タグ	説明
<table>	テーブルに基本スタイルを追加します。
<thead>	テーブルのヘッダー行のコンテナ要素 (<tr>)。テーブルの列を識別するために使用されます。
<tbody>	テーブル本体内のテーブル行のコンテナ要素 (<tr>)。
<tr>	単一の行に表示される表セルのグループのコンテナ要素 (<td> または <th>)。
<td>	デフォルトのテーブルセル。
<th>	列または行を識別するために使用される特別なテーブルセル (範囲と位置に応じて)。
<caption>	テーブルストレージの内容の説明または概要。

テーブルクラス

テーブルでは次のテーブルスタイルを使用できます:

説明インスタンス.table任意のテーブルに基本スタイルを追加します。テーブル>風景区切り文字のみ)試してください.table-striped <tbody> 内にゼブラストライプを追加します (IE8 ではサポートされていません)すべてのテーブルに試してください.table-borderedセルに追加します試してください.table-hover<tbody>内の任意の行でマウスホバー状態を有効にしてください試してください.table-condensedテーブルをより美しくコンパクトにします試してみましょう試してみましょう<tr>、<th> 行またはセル:






		すべてのテーブルクラスに参加してください

クラス

説明

インスタンス

.active

ホバーカラーを行またはセルに適用します

試してみましょう

.success

は操作が成功したことを意味します

試してみましょう

.info

情報変更の操作を示します

試してみるit

.warning

は警告操作を示します

Try it

.danger

は危険な操作を意味します

Try it

基本的なテーブル

パディングと水平分割のみを備えた基本的なテーブルが必要な場合は、次の例に示すように、クラス .table を追加します。 [例の実行] ボタンをクリックしてオンラインの例を表示します

オプションのテーブルクラス

基本的なテーブルタグと .table クラスに加えて、タグのスタイルを定義するために使用できるクラスがいくつかあります。これらのクラスを以下に紹介します。

ストライプテーブル

.table-striped

クラスを追加すると、以下の例に示すように <tbody> 内の行にストライプが表示されます。以下の例に示すように、各要素の周囲に境界線があり、テーブル全体が丸くなっていることがわかります。

<!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>

hover table

.table-hover

クラスを追加すると、明るい灰色の背景が表示されます。以下の例に示すように、ポインターは行の上に移動します。

<!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-condensed

クラスを追加すると、行内のパディングが半分にカットされ、テーブルがよりコンパクトに見えるようになります。以下の例に示されています。これは、情報をよりコンパクトに表示したい場合に便利です。

实例
<!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>

コンテキストクラス以下の表にリストされているコンテキストクラスを使用すると、テーブルの行または個々のセルの背景色を変更できます。

クラス

説明

.active

ホバーカラーを特定の行またはセルに適用します

.success 成功または肯定的なアクションを示しますは次のことを示します注意を必要とする警告は、危険または潜在的に否定的なアクションを示します

实例
<!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.tableインスタンス

	.warning
	.danger
	これらのクラスは、<tr>、<td>、または < に適用できます。
レスポンシブテーブル
クラスで任意の	をラップすることで、小さなデバイス (768 ピクセル未満) に対応するためにテーブルを水平にスクロールさせることができます。幅 768 ピクセルを超える大きなデバイスで表示しても、違いはわかりません。

实例
<!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>

インスタンスの実行 »「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

← ブートストラップコード

ブートストラップフォーム →

提出する