Html 创建周日历模拟谷歌日历

我正在尝试创建周视图日历，日历没有响应。日期应固定在顶部，时间应固定在左侧。日历的两侧都应该有滚动条，但滚动条必须位于日程表的内部。（请参见下面谷歌日历/我的屏幕截图）：

以下是我当前的解决方案：

正文{
背景:#f0ece2；
}
.内部{
宽度：700px；
高度：450px；
保证金：50px自动；
溢出：滚动；
}
桌子{
}
表td{
背景：#acdbdf；
填充：20px 60px；
}
表thead th{
位置：粘性；
排名：0；
背景色：#010101；
颜色：#fff；
填充：20px；
文本转换：大写；
字号：21px；
z指数：5；
}
表tbody tr th{
位置：粘性；
左：0；
背景色：#69779b；
颜色：#fff；
填充：20px；
}

星期一
星期二
星期三
星期四
星期五
星期六
星期日
00:00
A.
B
C
D
E
F
G
01:00
A.
B
C
D
E
F
G
02:00
A.
B
C
D
E
F
G
03:00
A.
B
C
D
E
F
G
04:00
A.
B
C
D
E
F
G
05:00
A.
B
C
D
E
F
G
06:00
A.
B
C
D
E
F
G
07:00
A.
B
C
D
E
F
G
08:00
A.
B
C
D
E
F
G
09:00
A.
B
C
D
E
F
G
10:00
A.
B
C
D
E
F
G
11:00
A.
B
C
D
E
F
G
12:00
A.
B
C
D
E
F
G
13:00
A.
B
C
D
E
F
G
14:00
A.
B
C
D
E
F
G
15:00
A.
B
C
D
E
F
G
16:00
A.
B
C
D
E
F
G
17:00
A.
B
C
D
E
F
G
18:00
A.
B
C
D
E
F
G
19:00
A.
B
C
D
E
F
G
20:00
A.
B
C
D
E
F
G
21:00
A.
B
C
D
E
F
G
22:00
A.
B
C
D
E
F
G
23:00
A.
B
C
D
E
F
G

用于您的

.container

div，该div是您的

.internal

div的父级，该div包含您的日历。添加以下CSS：

.container{
  width: 100vw;
}

使其跨越视口的整个宽度。然后在

.inner

div上，我看到您有一个定义的宽度和高度，并且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; 
}

有关工作示例，请参见此代码笔：

以下是您取得的成就：

---

此外，主要浏览器支持使用前缀的滚动条样式，请参见此处：

我不确定这是否适用于您，但希望它能帮助您

table.scroll{
宽度：100%；
边界间距：0；
边框：2件纯黑；
}
表1.4，
表1.1.td，
表1.tr，
表4.4-4，
table.tbody{
显示：块；
}
表4.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.2.2.2.2.1.1.2.2{
宽度：97%；
宽度：-webkit计算（100%-16px）；
宽度：-moz计算（100%-16px）；
宽度：计算（100%-16px）；
}
table.tr:after{
内容：''；
显示：块；
可见性：隐藏；
明确：两者皆有；
}
表1.2.2.2.1.1.1.2.2.2.2.2.2.2.1.1.2.1.1.1.2.2.2.2.2.2.1.1{
高度：100px；
溢出y：自动；
溢出x：隐藏；
}
表1.2.3车身总成，
表1.4滚动至第四页{
宽度：19%；
浮动：左；
右边框：1px纯黑；
}
thead tr th{
高度：30px；
线高：30px；
}
tbody{
边框顶部：2件纯黑；
}
tbody td:最后一个孩子，thead th:最后一个孩子{
右边界：没有！重要；
}

总目1
总目2
总目3
总目4
总目5
内容1
内容2
内容3
内容4
内容5
内容1
乱数假文
内容3
内容4
内容5
内容1
内容2
内容3