Table

Detail
Basic
Background
Align
Fixed
Wrap
Variables
Mixins
Sources

Detail

テーブル装飾を作るエレメント CSS。

Basic

Pattern

Border

Line

Outline

見出しセル	見出しセル	見出しセル	見出しセル
データセル	データセル	データセル	データセル
データセル	データセル	データセル	データセル

<table class="table is-border">
  <thead>
    <tr><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th></tr>
  </thead>
  <tbody>
    <tr><td>データセル</td><td>データセル</td><td>データセル</td><td>データセル</td></tr>
    <tr><td>データセル</td><td>データセル</td><td>データセル</td><td>データセル</td></tr>
  </tbody>
</table>

Selector	Description
`.table`	テーブル装飾の起点として使うセレクター。

Modifier	Description
`.is-line`	`.table` に付与すると横線で区切ったテーブル装飾になります。
`.is-outline`	`.table` に付与するとテーブルの周りに線を引きます。
`.is-border`	`.table` に付与すると縦線・横線・外周線のあるテーブル装飾になります。

Background

見出しセル	見出しセル	見出しセル	見出しセル
データセル	データセル	データセル	データセル
データセル	データセル	データセル	データセル

<table class="table is-border">
  <thead>
    <tr class="box is-paint"><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th></tr>
  </thead>
  <tbody>
    <tr><td>データセル</td><td class="box is-spot">データセル</td><td>データセル</td><td>データセル</td></tr>
    <tr><td class="box is-danger">データセル</td><td>データセル</td><td>データセル</td><td>データセル</td></tr>
  </tbody>
</table>

Modifier	Description
`.is-paint`	`tr, th, td` に付与するとセル背景がベタ塗りになります。
`.is-spot`	`tr, th, td` に付与するとセル背景が強調されます。
`.is-danger`	`tr, th, td` に付与するとセル背景がエラー装飾になります。

Stripe

見出しセル	見出しセル	見出しセル	見出しセル
データセル	データセル	データセル	データセル
データセル	データセル	データセル	データセル
データセル	データセル	データセル	データセル
データセル	データセル	データセル	データセル

<table class="table is-border is-stripe">
  <thead>
    <tr><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th></tr>
  </thead>
  <tbody>
    <tr><td>データセル</td><td>データセル</td><td>データセル</td><td>データセル</td></tr>
    <tr><td>データセル</td><td>データセル</td><td>データセル</td><td>データセル</td></tr>
    <tr><td>データセル</td><td>データセル</td><td>データセル</td><td>データセル</td></tr>
    <tr><td>データセル</td><td>データセル</td><td>データセル</td><td>データセル</td></tr>
  </tbody>
</table>

Modifier	Description
`.is-stripe`	`.table` に付与すると行背景色が交互に塗られます。

Align

.table または .table 内の tr, th, td はモディファイア付与で文字の方向を調整できます。

見出しセル	見出しセル	見出しセル	見出しセル
データセル	データセルデータセル	データセル	データセル
データセル	データセル	データセルデータセル	データセル

<table class="table is-border">
  <thead>
    <tr><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th></tr>
  </thead>
  <tbody>
    <tr><td>データセル</td><td>データセル<br />データセル</td><td>データセル</td><td>データセル</td></tr>
    <tr><td>データセル</td><td>データセル</td><td>データセル<br />データセル</td><td>データセル</td></tr>
  </tbody>
</table>

Left	Center	Right	Middle
`.is-left`	`.is-center`	`.is-right`	`.is-middle`

Fixed

見出しセル	見出しセル	見出しセル	見出しセル
データセルデータセル	データセル	データセル	データセルデータセルデータセル
データセル	データセル	データセルデータセルデータセル	データセル

<table class="table is-border is-fixed">
  <thead>
    <tr><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th></tr>
  </thead>
  <tbody>
    <tr><td>データセルデータセル</td><td>データセル</td><td>データセル</td><td>データセルデータセルデータセル</td></tr>
    <tr><td>データセル</td><td>データセル</td><td>データセルデータセルデータセル</td><td>データセル</td></tr>
  </tbody>
</table>

Selector	Description
`.is-Fixed`	`.table` に付与すると、列の幅が最初の行で固定されます。

Warning

.is-Fixed を付与すると 2 行目以降がはみ出しても無視されるようになります。.text.is-break などでテーブル内に収める工夫が必要です。

Wrap

.table 内データが収まりきれないと分かっている場合は専用のラッパーでスクロールさせます。スクロール可能な方向には影が付くので、アクセシビリティ向上に役立ちます。

影を取り除く場合は、Option の $option-add-style-table-wrap-shadow を false にします。

見出しセル	見出しセル	見出しセル	見出しセル
折り返さないテキスト＋折り返さないテキスト	折り返さないテキスト＋折り返さないテキスト	折り返さないテキスト＋折り返さないテキスト	折り返さないテキスト＋折り返さないテキスト
折り返さないテキスト＋折り返さないテキスト	折り返さないテキスト＋折り返さないテキスト	折り返さないテキスト＋折り返さないテキスト	折り返さないテキスト＋折り返さないテキスト
折り返さないテキスト＋折り返さないテキスト	折り返さないテキスト＋折り返さないテキスト	折り返さないテキスト＋折り返さないテキスト	折り返さないテキスト＋折り返さないテキスト
折り返さないテキスト＋折り返さないテキスト	折り返さないテキスト＋折り返さないテキスト	折り返さないテキスト＋折り返さないテキスト	折り返さないテキスト＋折り返さないテキスト

<div class="table-wrap">
  <table class="table is-border is-stripe">
    <thead>
      <tr class="box is-paint"><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th></tr>
    </thead>
    <tbody>
      <tr><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td></tr>
      <tr><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td></tr>
      <tr><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td></tr>
      <tr><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td><td><span class="text is-nowrap">折り返さないテキスト＋折り返さないテキスト</span></td></tr>
    </tbody>
  </table>
</div>

Selector	Description
`.table-wrap`	`.table` をラップして横スクロールさせるセレクター。

Variables

CSS Variables

false

true

Name

Default Value

Compiled Value

Name
$selector-table
Default Value
.table
Compiled Value
.table
Name
$selector-table-box
Default Value
.box
Compiled Value
.box
Name
$selector-table-thead
Default Value
thead
Compiled Value
thead
Name
$selector-table-tbody
Default Value
tbody
Compiled Value
tbody
Name
$selector-table-tr
Default Value
tr
Compiled Value
tr
Name
$selector-table-th
Default Value
th
Compiled Value
th
Name
$selector-table-td
Default Value
td
Compiled Value
td
Name
$selector-table-wrap
Default Value
.table-wrap
Compiled Value
.table-wrap
Name
$modifier-table-line
Default Value
.is-line
Compiled Value
.is-line
Name
$modifier-table-outline
Default Value
.is-outline
Compiled Value
.is-outline
Name
$modifier-table-border
Default Value
.is-border
Compiled Value
.is-border
Name
$modifier-table-stripe
Default Value
.is-stripe
Compiled Value
.is-stripe
Name
$modifier-table-paint
Default Value
.is-paint
Compiled Value
.is-paint
Name
$modifier-table-spot
Default Value
.is-spot
Compiled Value
.is-spot
Name
$modifier-table-danger
Default Value
.is-danger
Compiled Value
.is-danger
Name
$modifier-table-right
Default Value
.is-right
Compiled Value
.is-right
Name
$modifier-table-center
Default Value
.is-center
Compiled Value
.is-center
Name
$modifier-table-left
Default Value
.is-left
Compiled Value
.is-left
Name
$modifier-table-middle
Default Value
.is-middle
Compiled Value
.is-middle
Name
$modifier-table-fixed
Default Value
.is-fixed
Compiled Value
.is-fixed
Name
$table-width
Default Value
100%
Compiled Value
100%
Name
$table-padding
Default Value
0.75em 1em
Compiled Value
0.75em 1em
Name
$table-background-color
Default Value
$convert-background
Compiled Value
white
Name
$table-border-width
Default Value
$global-border-width
Compiled Value
1px
Name
$table-border-color
Default Value
$convert-border
Compiled Value
#d1d8dc
Name
$table-th-border-bottom-width
Default Value
$global-border-width
Compiled Value
1px
Name
$table-paint-background-color
Default Value
$convert-table-paint-background-color
Compiled Value
rgba(38, 121, 130, 0.7)
Name
$table-paint-color
Default Value
$convert-table-paint-color
Compiled Value
white
Name
$table-spot-background-color
Default Value
$convert-table-spot-background-color
Compiled Value
rgba(240, 225, 66, 0.45)
Name
$table-danger-background-color
Default Value
$convert-table-danger-background-color
Compiled Value
rgba(219, 87, 87, 0.2)
Name
$table-stripe-background-color
Default Value
$convert-table-stripe-background-color
Compiled Value
rgba(40, 48, 52, 0.05)
Name
$table-wrap-shadow-start
Default Value
$convert-table-wrap-shadow-start
Compiled Value
rgba(102, 122, 133, 0.15)
Name
$table-wrap-shadow-end
Default Value
$convert-table-wrap-shadow-end
Compiled Value
rgba(255, 255, 255, 0)
Name
$table-wrap-shadow-size
Default Value
20px
Compiled Value
20px

Mixins

musubii-style-table()
musubii-style-table-line()
musubii-style-table-outline()
musubii-style-table-border()
musubii-style-table-bg-paint()
musubii-style-table-bg-spot()
musubii-style-table-bg-danger()
musubii-style-table-stripe()
musubii-style-table-right()
musubii-style-table-center()
musubii-style-table-left()
musubii-style-table-middle()
musubii-style-table-fixed()
musubii-style-table-wrap()
musubii-style-table-wrap-child-table()

Table

#Table of Contents

#Detail

#Basic

#Background

#Stripe

#Align

#Fixed

#Wrap

#Variables

#Mixins

#Sources

Table of Contents