创建每周日历模仿谷歌日历
我正在尝试创建每周视图日历，日历没有响应。天应该固定在上面，时间应该固定在左边。日历应该在两边都有滚动条，但滚动条必须在 schedule 内。（见下面谷歌日历/我的截图）：
这是我目前的解决方案：https : //codepen.io/Rahmans/pen/LvWZpN
body {
background: #f0ece2;
}
.inner {
width: 700px;
height: 450px;
margin: 50px auto;
overflow: scroll;
}
table {
}
table td {
background: #acdbdf;
padding: 20px 60px;
}
table thead th {
position: sticky;
top: 0;
background-color: #010101;
color: #fff;
padding: 20px ;
text-transform: uppercase;
font-size: 21px;
z-index: 5;
}
table tbody tr th {
position: sticky;
left: 0;
background-color: #69779b;
color: #fff;
padding: 20px ;
}<div class="container">
<div class="inner">
<table>
<thead>
<tr>
<th> </th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<th>00:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>01:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>02:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>03:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>04:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>05:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>06:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>07:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>08:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>09:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>10:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>11:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>12:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>13:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>14:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>15:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>16:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>17:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>18:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>19:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>20:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>21:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>22:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>23:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
</tbody>
</table>
</div>
</div>对于您的div，它是包含日历的 div.container的父级。.inner添加这个CSS：
.container{
width: 100vw;
}
使其跨越视口的整个宽度。然后在你的.innerdiv 上我看到你有一个定义的宽度和高度，并且在你的 css 上溢出，这意味着你现在可以按.inner如下方式设置你的 div 滚动条的样式：
.inner {
width: 700px;
height: 450px;
margin: 50px auto;
overflow: scroll;
}
/* width */
.inner::-webkit-scrollbar {
width: 10px;
}
/* Track */
,inner::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
.inner::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
请参阅此 codepen 的工作示例： https ://codepen.io/itscosmas/pen/bGNqGXV
这是您所实现的目标：
此外，主要浏览器使用前缀支持滚动条样式，请参阅此处：https://caniuse.com/#search=scrollbar
| 归档时间： |
|
| 查看次数： |
219 次 |
| 最近记录： |