コンテンツ

標準化、タイポグラフィ、画像、表などを含む最もよく使用されるHTML要素のいくつかを使ってコンテンツを表示するためのスタイル。

現在翻訳中です。お待ちください。

テーブル

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any <table>.

Contents

Basic example

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
 <thead>
   <tr>
     <th>#</th>
     <th>First Name</th>
     <th>Last Name</th>
     <th>Username</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <th scope="row">1</th>
     <td>Mark</td>
     <td>Otto</td>
     <td>@mdo</td>
   </tr>
   <tr>
     <th scope="row">2</th>
     <td>Jacob</td>
     <td>Thornton</td>
     <td>@fat</td>
   </tr>
   <tr>
     <th scope="row">3</th>
     <td>Larry</td>
     <td>the Bird</td>
     <td>@twitter</td>
   </tr>
 </tbody>
</table>

Inverse table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-inverse">
 <thead>
   <tr>
     <th>#</th>
     <th>First Name</th>
     <th>Last Name</th>
     <th>Username</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <th scope="row">1</th>
     <td>Mark</td>
     <td>Otto</td>
     <td>@mdo</td>
   </tr>
   <tr>
     <th scope="row">2</th>
     <td>Jacob</td>
     <td>Thornton</td>
     <td>@fat</td>
   </tr>
   <tr>
     <th scope="row">3</th>
     <td>Larry</td>
     <td>the Bird</td>
     <td>@twitter</td>
   </tr>
 </tbody>
</table>

Table head options

Use one of two modifier classes to make <thead>s appear light or dark gray.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
 <thead class="thead-inverse">
   <tr>
     <th>#</th>
     <th>First Name</th>
     <th>Last Name</th>
     <th>Username</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <th scope="row">1</th>
     <td>Mark</td>
     <td>Otto</td>
     <td>@mdo</td>
   </tr>
   <tr>
     <th scope="row">2</th>
     <td>Jacob</td>
     <td>Thornton</td>
     <td>@fat</td>
   </tr>
   <tr>
     <th scope="row">3</th>
     <td>Larry</td>
     <td>the Bird</td>
     <td>@twitter</td>
   </tr>
 </tbody>
</table>

<table class="table">
 <thead class="thead-default">
   <tr>
     <th>#</th>
     <th>First Name</th>
     <th>Last Name</th>
     <th>Username</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <th scope="row">1</th>
     <td>Mark</td>
     <td>Otto</td>
     <td>@mdo</td>
   </tr>
   <tr>
     <th scope="row">2</th>
     <td>Jacob</td>
     <td>Thornton</td>
     <td>@fat</td>
   </tr>
   <tr>
     <th scope="row">3</th>
     <td>Larry</td>
     <td>the Bird</td>
     <td>@twitter</td>
   </tr>
 </tbody>
</table>

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
 <thead>
   <tr>
     <th>#</th>
     <th>First Name</th>
     <th>Last Name</th>
     <th>Username</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <th scope="row">1</th>
     <td>Mark</td>
     <td>Otto</td>
     <td>@mdo</td>
   </tr>
   <tr>
     <th scope="row">2</th>
     <td>Jacob</td>
     <td>Thornton</td>
     <td>@fat</td>
   </tr>
   <tr>
     <th scope="row">3</th>
     <td>Larry</td>
     <td>the Bird</td>
     <td>@twitter</td>
   </tr>
 </tbody>
</table>

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter
<table class="table table-bordered">
 <thead>
   <tr>
     <th>#</th>
     <th>First Name</th>
     <th>Last Name</th>
     <th>Username</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <th scope="row">1</th>
     <td>Mark</td>
     <td>Otto</td>
     <td>@mdo</td>
   </tr>
   <tr>
     <th scope="row">2</th>
     <td>Mark</td>
     <td>Otto</td>
     <td>@TwBootstrap</td>
   </tr>
   <tr>
     <th scope="row">3</th>
     <td>Jacob</td>
     <td>Thornton</td>
     <td>@fat</td>
   </tr>
   <tr>
     <th scope="row">4</th>
     <td colspan="2">Larry the Bird</td>
     <td>@twitter</td>
   </tr>
 </tbody>
</table>

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
 <thead>
   <tr>
     <th>#</th>
     <th>First Name</th>
     <th>Last Name</th>
     <th>Username</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <th scope="row">1</th>
     <td>Mark</td>
     <td>Otto</td>
     <td>@mdo</td>
   </tr>
   <tr>
     <th scope="row">2</th>
     <td>Jacob</td>
     <td>Thornton</td>
     <td>@fat</td>
   </tr>
   <tr>
     <th scope="row">3</th>
     <td colspan="2">Larry the Bird</td>
     <td>@twitter</td>
   </tr>
 </tbody>
</table>

Small table

Add .table-sm to make tables more compact by cutting cell padding in half.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-sm">
 <thead>
   <tr>
     <th>#</th>
     <th>First Name</th>
     <th>Last Name</th>
     <th>Username</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <th scope="row">1</th>
     <td>Mark</td>
     <td>Otto</td>
     <td>@mdo</td>
   </tr>
   <tr>
     <th scope="row">2</th>
     <td>Jacob</td>
     <td>Thornton</td>
     <td>@fat</td>
   </tr>
   <tr>
     <th scope="row">3</th>
     <td colspan="2">Larry the Bird</td>
     <td>@twitter</td>
   </tr>
 </tbody>
</table>

Contextual classes

Use contextual classes to color table rows or individual cells.

Class Description
.table-active Applies the hover color to a particular row or cell
.table-success Indicates a successful or positive action
.table-info Indicates a neutral informative change or action
.table-warning Indicates a warning that might need attention
.table-danger Indicates a dangerous or potentially negative action
# 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
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-success">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
 <td class="table-active">...</td>
 <td class="table-success">...</td>
 <td class="table-warning">...</td>
 <td class="table-danger">...</td>
 <td class="table-info">...</td>
</tr>

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Firefox and fieldsets

Firefox has some awkward fieldset styling involving width that interferes with the responsive table. This cannot be overridden without a Firefox-specific hack that we don’t provide in Bootstrap:

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

For more information, read this Stack Overflow answer.

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

Reflow

# 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 class="table table-reflow">
 <thead>
   <tr>
     <th>#</th>
     <th>Table heading</th>
     <th>Table heading</th>
     <th>Table heading</th>
     <th>Table heading</th>
     <th>Table heading</th>
     <th>Table heading</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <th scope="row">1</th>
     <td>Table cell</td>
     <td>Table cell</td>
     <td>Table cell</td>
     <td>Table cell</td>
     <td>Table cell</td>
     <td>Table cell</td>
   </tr>
   <tr>
     <th scope="row">2</th>
     <td>Table cell</td>
     <td>Table cell</td>
     <td>Table cell</td>
     <td>Table cell</td>
     <td>Table cell</td>
     <td>Table cell</td>
   </tr>
   <tr>
     <th scope="row">3</th>
     <td>Table cell</td>
     <td>Table cell</td>
     <td>Table cell</td>
     <td>Table cell</td>
     <td>Table cell</td>
     <td>Table cell</td>
   </tr>
 </tbody>
</table>