BootstrapのTable関連を少し試してみたいと思います。
Basic example
tableタグに.tableを追加することで、スタイルを追加します。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <table class="table"> <caption>アイドルマスターシンデレラガールズ</caption> <thead> <tr> <th>No</th> <th>Name</th> <th>Age</th> <th>Birthday</th> </tr> </thead> <tbody> <tr> <th>01</th> <td>島村卯月</td> <td>17</td> <td>4/24</td> </tr> <tr> <th>02</th> <td>渋谷 凛</td> <td>15</td> <td>8/10</td> </tr> <tr> <th>03</th> <td>本田未央</td> <td>15</td> <td>12/1</td> </tr> </tbody></table> |
Striped rows
tableタグに.table-stripedを追加することで、tbodyタグ内の行の背景をストライプにします。
:nth-childを使用しているので、IE8では対応していないようです。
HTML
1 2 3 | <table class="table table-striped">～略～</table> |
Bordered table
tableタグに.table-borderedを追加することで、tableの周囲にborderを追加します。
HTML
1 2 3 | <table class="table table-bordered">～略～</table> |
Hover rows
tableタグに.table-hoverを追加することで、tbodyの行をホバーした時に背景色をつけます。
HTML
1 2 3 | <table class="table table-hover">～略～</table> |
Condensed table
tableタグに.table-condensedを追加することで、table内の余白を半分に縮小します。
HTML
1 2 3 | <table class="table table-condensed">～略～</table> |
Contextual classes
行またはセルに個別の背景色をつける場合は、trまたはth、tdタグに下記クラスを追加します。
| .active | この背景色が追加されます。 |
|---|---|
| .success | この背景色が追加されます。 |
| .info | この背景色が追加されます。 |
| .warning | この背景色が追加されます。 |
| .danger | この背景色が追加されます。 |
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <table class="table"> <caption>アイドルマスターシンデレラガールズ</caption> <thead> <tr> <th>No</th> <th>Name</th> <th>Age</th> <th>Birthday</th> </tr> </thead> <tbody> <tr> <th>01</th> <td>島村卯月</td> <td>17</td> <td>4/24</td> </tr> <tr class="active"> <th>02</th> <td>渋谷 凛</td> <td>15</td> <td>8/10</td> </tr> <tr class="success"> <th>03</th> <td>本田未央</td> <td>15</td> <td>12/1</td> </tr> <tr class="info"> <th>04</th> <td>赤城みりあ</td> <td>11</td> <td>4/14/</td> </tr> <tr class="warning"> <th>05</th> <td>アナスタシア</td> <td>15</td> <td>9/19/</td> </tr> <tr class="danger"> <th>06</th> <td>双葉 杏</td> <td>17</td> <td>9/2</td> </tr> <tr> <th class="active">07</th> <td class="success">前川みく</td> <td class="info">15</td> <td>2/22</td> </tr> <tr> <th class="warning">08</th> <td class="danger">三村かな子</td> <td>17</td> <td>1/6</td> </tr> </tbody></table> |
Responsive tables
.tableをdiv.table-responsiveで括ることで、画面サイズが小さい場合に対応(横スクロールの表示)します。
画面サイズ768px以下で、tableの内容量が画面幅で収まらない場合にスクロール表示されます。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <div class="table-responsive"> <table class="table"> <caption>アイドルマスターシンデレラガールズ</caption> <thead> <tr> <th>No</th> <th>Name</th> <th>Age</th> <th>Birthday</th> <th>Blood type</th> <th>Height</th> <th>Birthplace</th> <th>Hobby</th> </tr> </thead> <tbody> <tr> <th>01</th> <td>島村卯月</td> <td>17</td> <td>4/24</td> <td>O型</td> <td>159cm</td> <td>東京</td> <td>友達と長電話</td> </tr> <tr> <th>02</th> <td>渋谷 凛</td> <td>15</td> <td>8/10</td> <td>B型</td> <td>165cm</td> <td>東京</td> <td>犬の散歩</td> </tr> <tr> <th>03</th> <td>本田未央</td> <td>15</td> <td>12/1</td> <td>B型</td> <td>161cm</td> <td>千葉</td> <td>ショッピング</td> </tr> </tbody> </table></div> |
【参考サイト】
コメントが承認されるまで時間がかかります。