我当前正在尝试创建每周查看日历,我们的日历没有响应 日历的两侧都应具有滚动条,但滚动条应位于计划部分内(请参见下面的Google日历的屏幕截图)
日期应固定在顶部,时间应固定在左侧。这是我的解决方案(codepen here)
<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>
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 ;
}
答案 0 :(得分:0)
对于您的.container
div的父级.inner
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;
}
有关工作示例,请参见此codepen: https://codepen.io/itscosmas/pen/bGNqGXV
这是您实现的目标:
此外,主流浏览器使用前缀也支持滚动条样式,请参见此处:https://caniuse.com/#search=scrollbar
答案 1 :(得分:0)
我不确定这是否对您有用,但希望它能对您有所帮助。
table.scroll {
width: 100%;
border-spacing: 0;
border: 2px solid black;
}
table.scroll th,
table.scroll td,
table.scroll tr,
table.scroll thead,
table.scroll tbody {
display: block;
}
table.scroll thead tr {
width: 97%;
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
table.scroll tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
table.scroll tbody td,
table.scroll thead th {
width: 19%;
float: left;
border-right: 1px solid black;
}
thead tr th {
height: 30px;
line-height: 30px;
}
tbody {
border-top: 2px solid black;
}
tbody td:last-child, thead th:last-child {
border-right: none !important;
}
<table class="scroll">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Lorem ipsum</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
答案 2 :(得分:0)
如果我正确理解了这个问题,我建议SimpleBar
真的很容易使用 Example Codepen Here
body {
background: #f0ece2;
}
.inner {
width: 700px;
height: 450px;
margin: 50px auto;
overflow: auto;
}
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;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Table Calendar</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" />
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>
</head>
<body>
<div class="container">
<div data-simplebar 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>
</body>
</html>
答案 3 :(得分:0)
export const app = express();
table {
border: 1px solid #ddd;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 10px;
max-width: 100%;
width: 100%;
}
table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td,
table > tfoot > tr > th,
table > tfoot > tr > td {
border: 1px solid #ddd;
line-height: 20px;
padding: 13px;
vertical-align: top;
}
table > thead > tr > th {
background: #444;
color: #fff;
font-weight: normal;
vertical-align: bottom;
}
table th {
text-align: left;
}
table,
table th,
table td,
table tr,
table tr th,
table tr td,
table thead,
table thead th,
table thead td,
table thead tr,
table thead tr th,
table thead tr td,
table tbody,
table tbody th,
table tbody td,
table tbody tr,
table tbody tr th,
table tbody tr td,
table tfoot,
table tfoot th,
table tfoot td,
table tfoot tr,
table tfoot tr th,
table tfoot tr td {
display: block;
}
table > thead {
float: left;
}
table > tbody > tr {
display: inline-block;
vertical-align: top;
}
table > tbody {
width: auto;
white-space: nowrap;
overflow-x: auto;
}
.inner {
width: 700px;
height: 450px;
margin: 50px auto;
}
table td {
background: #acdbdf;
padding: 20px 60px;
}