レスポンシブな表 Responsive tables
class属性にtable-responsiveを指定したdiv要素で表（table要素）を括ると、表示領域の幅が狭くても、表のセル内のテキストを改行しない。表示しきれない場合、水平方向のスクロールバーが現れる。
サンプル
| 順位 | 名前 | 惑星 | 勝点 | 試合数 | 勝数 | 引分数 |
|---|---|---|---|---|---|---|
| 1 | ブルーＳＣ | 地球 | 101 | 42 | 31 | 8 |
| 2 | ＦＣウェヌス | 金星 | 83 | 42 | 24 | 11 |
| 3 | ジュピターＦＣ | 木星 | 68 | 42 | 18 | 14 |
| 4 | ＳＣマーキュリー | 水星 | 67 | 42 | 18 | 13 |
| 5 | ＦＣマルス | 火星 | 65 | 42 | 18 | 11 |
ソースコード
<div class="table-responsive"> <table class="table"> <thead> <tr> <th>順位</th> <th>名前</th> <th>惑星</th> <th>勝点</th> <th>試合数</th> <th>勝数</th> <th>引分数</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>ブルーＳＣ</td> <td>地球</td> <td>101</td> <td>42</td> <td>31</td> <td>8</td> </tr> <tr> <th>2</th> <td>ＦＣウェヌス</td> <td>金星</td> <td>83</td> <td>42</td> <td>24</td> <td>11</td> </tr> <tr> <th>3</th> <td>ジュピターＦＣ</td> <td>木星</td> <td>68</td> <td>42</td> <td>18</td> <td>14</td> </tr> <tr> <th>4</th> <td>ＳＣマーキュリー</td> <td>水星</td> <td>67</td> <td>42</td> <td>18</td> <td>13</td> </tr> <tr> <th>5</th> <td>ＦＣマルス</td> <td>火星</td> <td>65</td> <td>42</td> <td>18</td> <td>11</td> </tr> </tbody> </table> </div>