CSS STUDIO

テーブル

基本的な例

<table>へ基本クラスである.tableを追加することで、 適度なpaddingと水平方向への区切りだけの基本的なスタイルを適用します。 これは非常に冗長であるように思えますが、カレンダーや日付ピッカーのような他のプラグインによる広範囲に渡るテーブル使用のことを考慮し、 我々が提供するテーブルのスタイルのカスタマイズを分離することにしました。

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  ...
</table>

ストライプ行

.table-stripedを使用して、<tbody>内のテーブル行にストライプを追加することができます。

ブラウザ互換性
ストライプは:nth-childCSSセレクタを使用してスタイルされています。 これはIE8では利用することはできません。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped">
  ...
</table>

ボーダーテーブル

.table-borderedを追加すると、テーブルとセルの全ての側面にボーダーを表示します。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered">
  ...
</table>

hover行

.table-hoverを追加すると、<tbody>内のテーブル行のhoverが有効になります。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover">
  ...
</table>

圧縮テーブル

.table-condensedを追加すると、セルのpaddingを半分にしてテーブルをよりコンパクトにします。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-condensed">
  ...
</table>

文脈テーブル

テーブルの行や個々のセルを着色する文脈クラスを使用します。

クラス 説明
.active 特定の行またはセルにhover色を適用します。
.success 成功または肯定的な動作を示します。
.info 当り障りのない情報の変更または動作を示します。
.warning 注意が必要かもしれない警告を示します。
.danger 危険、または否定的な動作を示します。
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content 
<!-- 行指定 -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- またはセル(td、th) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

支援技術に対して意図を伝える
色を使用することでテーブル行または個々のセルに意味付けすることは、あくまで視覚的な指示を提供するだけであり、 スクリーン・リーダーのような支援技術を使用するユーザーにその意図は伝達されません。 色による情報の意味付けをする際には、コンテンツ自身でその意図を明確(適切なテーブル行/セル内の可視テキスト)にするか、 .sr-onlyクラスを使用した追加の非表示テキストのような、代わりの意味付けとなるものを含めてください。

レスポンシブテーブル

レスポンシブなテーブルを作成するには、.tableを.table-responsiveで囲み、 小型デバイス(768px未満)で水平スクロールするようにします。 768px幅以上では、これらのテーブルの違いを確認することはできないでしょう。

垂直方向の切り揃え/切り詰め
レスポンシブなテーブルはoverflow-y: hiddenを使用して、 テーブルの最下部または最上部からはみ出したコンテンツを切り詰めます。 特にドロップダウンメニューと他のサードパーティ製のウィジットに有用です。

Firefoxとfieldset
Firefoxには、レスポンシブルなテーブルに干渉するやっかいなfieldsetが実装されています。 これはFirefox独自のハック無しでは上書きすることはできず、Bootstrapでは提供していません。 

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

詳細については、Stack Overflow の回答を確認してください。

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

 Back to top

docs CC BY 3.0

このページは、ページトップのリンク先のBootstrap公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。