5

我正在尝试创建每周视图日历,日历没有响应。日子应该固定在上面,时间应该固定在左边。日历的两边都应该有滚动条,但滚动条必须在 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>&nbsp;</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>

4

4 回答 4

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>

于 2019-12-23T06:25:16.620 回答
0

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;
}
<div class="container">
  <div class="inner">
      <table>
      <thead>
          <tr>
              <th>&nbsp;</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>

于 2019-12-25T10:16:46.060 回答
0

对于您的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; 
}

请参阅此代码笔以获取工作示例: https ://codepen.io/itscosmas/pen/bGNqGXV

这是您实现的目标:

截屏

此外,使用前缀的主要浏览器支持滚动条样式,请参见此处:https ://caniuse.com/#search=scrollbar

于 2019-12-19T11:57:23.250 回答
0

如果我正确理解了这个问题,我推荐SimpleBar

在这里使用示例 Codepen真的很容易

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>&nbsp;</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>

于 2019-12-25T05:54:41.177 回答