<div class="other-37">
<table>
<tr>
<th></th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
<th>日</th>
</tr>
<tr>
<th>10:00</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th>10:30</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th>11:00</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th>11:30</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th>12:00</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th>12:30</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th>13:00</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th>13:30</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th>14:00</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th>14:30</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th>15:00</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<th>15:30</th>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</table>
</div>
.other-37
table
tr
th
- for (var i = 0; i < dates.length; i++)
th #{dates[i]}
- for (var n = 0; n < times.length; n++)
tr
th #{times[n]}
- for (var m = 0; m < dates.length; m++)
td -
{
"dates": [
"月",
"火",
"水",
"木",
"金",
"土",
"日"
],
"times": [
"10:00",
"10:30",
"11:00",
"11:30",
"12:00",
"12:30",
"13:00",
"13:30",
"14:00",
"14:30",
"15:00",
"15:30"
]
}
$BLOCK_NAME: '.other-37';
// 変数
$col-width: 180px;
#{ $BLOCK_NAME } {
width: 100%;
height: 500px;
overflow: auto;
max-width: calc(#{$col-width} * 8 + 20px);
table {
width: calc(#{$col-width} * 8);
}
tr:nth-of-type(1) {
th {
background: #000;
color: #fff;
position: sticky;
top: 0;
left: 0;
z-index: 1;
&:first-child {
z-index: 2;
}
&:nth-child(7) {
background: #006;
}
&:nth-child(8) {
background: #600;
}
}
}
th,
td {
position: relative;
width: $col-width;
height: 60px;
vertical-align: middle;
text-align: center;
}
tr:not(:first-child) {
th:nth-of-type(1) {
background: #333;
color: #fff;
position: sticky;
top: 0;
left: 0;
}
}
}