Tableの使い方

Table

Tachyonsには、テーブルをスタイリングするための基本的なユーティリティがいくつかあります。

<table>
金融機関
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
0010 りそな銀行

.collapse

tableタグにcollapseクラスを指定すると、セルの余白(パディング)が狭くなります。

<table class="collapse">
金融機関
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
0010 りそな銀行

.striped--light-silver

trタグにstriped--light-silverクラスを指定すると、奇数行の色がlight-silverになります。

奇数行のtrタグだけでなく、すべてのtrタグに指定して構いません。

<tr class="striped--light-silver">
金融機関
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
0010 りそな銀行

.striped--moon-gray

<tr class="striped--moon-gray">
金融機関
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
0010 りそな銀行

.striped--light-gray

<tr class="striped--light-gray">
金融機関
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
0010 りそな銀行

.striped--near-white

<tr class="striped--near-white">
金融機関
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
0010 りそな銀行

.stripe-light

<tr class="stripe-light">
金融機関
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
0010 りそな銀行

.stripe-dark

trタグにstripe-darkクラスを指定すると、奇数行の色がdarkになります。

奇数行のtrタグだけでなく、すべてのtrタグに指定して構いません。

<table>
  <tbody>
    <tr class="stripe-dark">
金融機関
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行
0010 りそな銀行