ストライプ柄 Striped rows
table
要素のclass
属性にtable-striped
を追加することで、ストライプ柄(縞模様)の表を作れる。
サンプル
順位 | 名前 | 惑星 | 勝点 |
---|---|---|---|
1 | ブルーSC | 地球 | 101 |
2 | FCウェヌス | 金星 | 83 |
3 | ジュピターFC | 木星 | 68 |
4 | SCマーキュリー | 水星 | 67 |
5 | FCマルス | 火星 | 65 |
ソースコード
<table class="table table-striped">
<thead>
<tr>
<th>順位</th>
<th>名前</th>
<th>惑星</th>
<th>勝点</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>ブルーSC</td>
<td>地球</td>
<td>101</td>
</tr>
<tr>
<th>2</th>
<td>FCウェヌス</td>
<td>金星</td>
<td>83</td>
</tr>
<tr>
<th>3</th>
<td>ジュピターFC</td>
<td>木星</td>
<td>68</td>
</tr>
<tr>
<th>4</th>
<td>SCマーキュリー</td>
<td>水星</td>
<td>67</td>
</tr>
<tr>
<th>5</th>
<td>FCマルス</td>
<td>火星</td>
<td>65</td>
</tr>
</tbody>
</table>