bootstrapテーブルスタイルテンプレート
https://www.runoob.com/try/try.php?filename=bootstrap3-table-striped Bootstrapインスタンス-ストライプテーブル
ストライプ表のレイアウト
名前
都市
郵便番号
Tanmay
Bangalore
560001
Sachin
Mumbai
400003
Uma
Pune
411027
tableの最も基本的なtable-striped縞table-bordered外枠table-hoverポインタが行にぶら下がると、薄い灰色の背景table-condensed行の内側余白が半分に切られ、テーブルがよりコンパクトに見えるようにtable-responsiveテーブルを水平にスクロールして小型デバイス(768 px未満)に適応できます.
参照:https://www.runoob.com/try/try.php?filename=bootstrap3-table-striped
ストライプ表のレイアウト
名前
都市
郵便番号
Tanmay
Bangalore
560001
Sachin
Mumbai
400003
Uma
Pune
411027
tableの最も基本的なtable-striped縞table-bordered外枠table-hoverポインタが行にぶら下がると、薄い灰色の背景table-condensed行の内側余白が半分に切られ、テーブルがよりコンパクトに見えるようにtable-responsiveテーブルを水平にスクロールして小型デバイス(768 px未満)に適応できます.
参照:https://www.runoob.com/try/try.php?filename=bootstrap3-table-striped
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap - </title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped table-bordered table-hover table-condensed table-responsive">
<caption> </caption>
<thead>
<tr class="active">
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr class="warning">
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr class="danger">
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</body>
</html>
table
table-striped
table-bordered
table-hover
table-condensed （padding） ，
table-responsive （ 768px）