<table class="table u-mb40">
<tr>
<th>#1</th>
<td>みかん</td>
<td>いぬ</td>
<td>ケーキ</td>
</tr>
<tr>
<th>#2</th>
<td>りんご</td>
<td>ねこ</td>
<td>ドーナツ</td>
</tr>
<tr>
<th>#3</th>
<td>バナナ</td>
<td>ねずみ</td>
<td>おはぎ</td>
</tr>
</table>
<table class="table u-mb40">
<thead>
<tr>
<th></th>
<th>果物</th>
<th>動物</th>
<th>スイーツ</th>
</tr>
</thead>
<tbody>
<tr>
<th>#1</th>
<td>みかん</td>
<td>いぬ</td>
<td>ケーキ</td>
</tr>
<tr>
<th>#2</th>
<td>りんご</td>
<td>ねこ</td>
<td>ドーナツ</td>
</tr>
<tr>
<th>#3</th>
<td>バナナ</td>
<td>ねずみ</td>
<td>おはぎ</td>
</tr>
</tbody>
</table>
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th>果物</th>
<th>動物</th>
<th>スイーツ</th>
</tr>
</thead>
<tbody>
<tr>
<th>#1</th>
<td>みかん</td>
<td>いぬ</td>
<td>ケーキ</td>
</tr>
<tr>
<th>#2</th>
<td>りんご</td>
<td>ねこ</td>
<td>ドーナツ</td>
</tr>
<tr>
<th>#3</th>
<td>バナナ</td>
<td>ねずみ</td>
<td>おはぎ</td>
</tr>
</tbody>
</table>
/* No context defined. */
// =====================================================================================
//
// table_01
//
// =====================================================================================
@use 'scss/global' as g;
// -------------------------------------------------------------------------------------
// 変数
// -------------------------------------------------------------------------------------
// 罫線の色
$color_border: g.$color_border;
// .table-stripedの背景色
$color_bg_striped: #f0f0f0;
// -------------------------------------------------------------------------------------
// 全体枠
// -------------------------------------------------------------------------------------
.table {
tr {
border-bottom: 1px solid $color_border;
}
th {
padding: 10px 18px;
font-weight: bold;
text-align: center;
}
td {
padding: 10px 18px;
text-align: center;
}
thead {
tr {
border-bottom: 1px solid #000;
}
}
}
// 偶数行に色付け
.table-striped {
tbody tr:nth-child(even) {
background-color: $color_bg_striped;
}
}