html - 尝试在我的日历中为上午/下午做一个 colspan，但对于 div-6ren

html - 尝试在我的日历中为上午/下午做一个 colspan，但对于 div

转载作者：行者123 更新时间：2023-11-28 17:23:40

我一直在制作一个日历，它同时显示 12 小时和 24 小时时间。

我将进行切换，以便这些仅显示我稍后想要的那些......但我试图弄清楚如何将 AM/PM div 置于它们各自的列集下。

我试图完全用 Divs 来做这件事，但 Colspan 似乎只适用于 td 元素。有没有一种方法可以做到这一点，使其相应地呈现？

你可以在这里看到一个 fiddle : https://jsfiddle.net/sf7de3sc/

附件代码如下:

.row:nth-child(even) {
  background-color: lightgray;
}

.hour {
  /* background-color:grey; */
  position: relative;
}

.half-hour {
  /* background-color: teal; */
  display: inline-block;
  float: left;
  width: 50%;
  height: 100%;
}

.quarter-hour {
  /* background-color:pink; */
  /* border: 1px solid #ccc; */
  display: inline-block;
  float: left;
  width: 50%;
  height: 100%;
}

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell,
.row-header,
.column-header {
  display: table-cell;
}

.cell {
  border: solid 1px black;
  height: 1px;
  width: 20px;
  text-align: center;
  cursor: pointer;
  opacity: 0.25;
  z-index: 21;
}

.column-header {
  text-align: center;
}

.selection:hover {
  background-color: cyan;
}

.selected {
  background-color: teal;
}


/*.selection > div {*/


/*display: none;*/


/*}*/

#selector-container {
  position: absolute;
  border: solid 1px darkgrey;
  z-index: 20;
  display: none;
  position: absolute;
  background-color: red;
  width: 1px;
  height: 1px;
}

<div id="schedulerTable" class="table style-scope seg-scheduler">
  <div class="row style-scope seg-scheduler">
    <div class="row-header style-scope seg-scheduler">Thu</div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>
    <template is="dom-repeat" class="style-scope seg-scheduler"></template>
  </div>
  <template id="days" is="dom-repeat" class="style-scope seg-scheduler"></template>
  <div class="row style-scope seg-scheduler" hidden="">
    <!-- 24 hr time -->
    <div class="column-header style-scope seg-scheduler"></div>

    <div class="column-header style-scope seg-scheduler">0</div>

    <div class="column-header style-scope seg-scheduler">1</div>

    <div class="column-header style-scope seg-scheduler">2</div>

    <div class="column-header style-scope seg-scheduler">3</div>

    <div class="column-header style-scope seg-scheduler">4</div>

    <div class="column-header style-scope seg-scheduler">5</div>

    <div class="column-header style-scope seg-scheduler">6</div>

    <div class="column-header style-scope seg-scheduler">7</div>

    <div class="column-header style-scope seg-scheduler">8</div>

    <div class="column-header style-scope seg-scheduler">9</div>

    <div class="column-header style-scope seg-scheduler">10</div>

    <div class="column-header style-scope seg-scheduler">11</div>

    <div class="column-header style-scope seg-scheduler">12</div>

    <div class="column-header style-scope seg-scheduler">13</div>

    <div class="column-header style-scope seg-scheduler">14</div>

    <div class="column-header style-scope seg-scheduler">15</div>

    <div class="column-header style-scope seg-scheduler">16</div>

    <div class="column-header style-scope seg-scheduler">17</div>

    <div class="column-header style-scope seg-scheduler">18</div>

    <div class="column-header style-scope seg-scheduler">19</div>

    <div class="column-header style-scope seg-scheduler">20</div>

    <div class="column-header style-scope seg-scheduler">21</div>

    <div class="column-header style-scope seg-scheduler">22</div>

    <div class="column-header style-scope seg-scheduler">23</div>
    <template is="dom-repeat" index-as="index" class="style-scope seg-scheduler"></template>
  </div>
  <div class="row style-scope seg-scheduler">
    <!-- 12 hr time -->
    <div class="column-header style-scope seg-scheduler"></div>

    <div class="column-header style-scope seg-scheduler">12</div>

    <div class="column-header style-scope seg-scheduler">1</div>

    <div class="column-header style-scope seg-scheduler">2</div>

    <div class="column-header style-scope seg-scheduler">3</div>

    <div class="column-header style-scope seg-scheduler">4</div>

    <div class="column-header style-scope seg-scheduler">5</div>

    <div class="column-header style-scope seg-scheduler">6</div>

    <div class="column-header style-scope seg-scheduler">7</div>

    <div class="column-header style-scope seg-scheduler">8</div>

    <div class="column-header style-scope seg-scheduler">9</div>

    <div class="column-header style-scope seg-scheduler">10</div>

    <div class="column-header style-scope seg-scheduler">11</div>

    <div class="column-header style-scope seg-scheduler">12</div>

    <div class="column-header style-scope seg-scheduler">1</div>

    <div class="column-header style-scope seg-scheduler">2</div>

    <div class="column-header style-scope seg-scheduler">3</div>

    <div class="column-header style-scope seg-scheduler">4</div>

    <div class="column-header style-scope seg-scheduler">5</div>

    <div class="column-header style-scope seg-scheduler">6</div>

    <div class="column-header style-scope seg-scheduler">7</div>

    <div class="column-header style-scope seg-scheduler">8</div>

    <div class="column-header style-scope seg-scheduler">9</div>

    <div class="column-header style-scope seg-scheduler">10</div>

    <div class="column-header style-scope seg-scheduler">11</div>
    <template is="dom-repeat" class="style-scope seg-scheduler"></template>
  </div>
  <div class="row style-scope seg-scheduler">
    <!-- am/pm -->
    <div class="column-header style-scope seg-scheduler"></div>
    <div class="style-scope seg-scheduler" style="
    /* width: 50%; */
">AM</div>
    <div class="style-scope seg-scheduler">PM</div>
  </div>
</div>

最佳答案

我认为这将是您最好的选择。

我将您的表格框起来并添加了 min-width。这允许更好地处理较小的屏幕。之后，我使用 flex-box 将您的 AM 和 PM 居中。请注意，AM 和 PM 父元素的宽度基于表格单元格的宽度为 22px (24*22 = 480px)。

.row:nth-child(even) {
  background-color: lightgray;
}

.hour {
  /* background-color:grey; */
  position: relative;
}

.half-hour {
  /* background-color: teal; */
  display: inline-block;
  float: left;
  width: 50%;
  height: 100%;
}

.quarter-hour {
  /* background-color:pink; */
  /* border: 1px solid #ccc; */
  display: inline-block;
  float: left;
  width: 50%;
  height: 100%;
}

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell,
.row-header,
.column-header {
  display: table-cell;
}

.cell {
  border: solid 1px black;
  height: 1px;
  width: 20px;
  text-align: center;
  cursor: pointer;
  opacity: 0.25;
  z-index: 21;
}

.column-header {
  text-align: center;
}

.selection:hover {
  background-color: cyan;
}

.selected {
  background-color: teal;
}

#selector-container {
  position: absolute;
  border: solid 1px darkgrey;
  z-index: 20;
  display: none;
  position: absolute;
  background-color: red;
  width: 1px;
  height: 1px;
}
.time{
  display: flex;
  width: 528px;
  justify-content: space-around;
  float: right;
}
#schedulerTable{
  width: 100%;
}
.frame{
  min-width: 568px;
}

<div class="frame">
<div id="schedulerTable" class="table style-scope seg-scheduler">
  <div class="row style-scope seg-scheduler">
    <div class="row-header style-scope seg-scheduler">Thu</div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>

    <div class="hour cell style-scope seg-scheduler">
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
      <div class="half-hour style-scope seg-scheduler">
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
        <div class="quarter-hour style-scope seg-scheduler selection"></div>
      </div>
    </div>
    <template is="dom-repeat" class="style-scope seg-scheduler"></template>
  </div>
  <template id="days" is="dom-repeat" class="style-scope seg-scheduler"></template>
  <div class="row style-scope seg-scheduler" hidden="">
    <!-- 24 hr time -->
    <div class="column-header style-scope seg-scheduler"></div>

    <div class="column-header style-scope seg-scheduler">0</div>

    <div class="column-header style-scope seg-scheduler">1</div>

    <div class="column-header style-scope seg-scheduler">2</div>

    <div class="column-header style-scope seg-scheduler">3</div>

    <div class="column-header style-scope seg-scheduler">4</div>

    <div class="column-header style-scope seg-scheduler">5</div>

    <div class="column-header style-scope seg-scheduler">6</div>

    <div class="column-header style-scope seg-scheduler">7</div>

    <div class="column-header style-scope seg-scheduler">8</div>

    <div class="column-header style-scope seg-scheduler">9</div>

    <div class="column-header style-scope seg-scheduler">10</div>

    <div class="column-header style-scope seg-scheduler">11</div>

    <div class="column-header style-scope seg-scheduler">12</div>

    <div class="column-header style-scope seg-scheduler">13</div>

    <div class="column-header style-scope seg-scheduler">14</div>

    <div class="column-header style-scope seg-scheduler">15</div>

    <div class="column-header style-scope seg-scheduler">16</div>

    <div class="column-header style-scope seg-scheduler">17</div>

    <div class="column-header style-scope seg-scheduler">18</div>

    <div class="column-header style-scope seg-scheduler">19</div>

    <div class="column-header style-scope seg-scheduler">20</div>

    <div class="column-header style-scope seg-scheduler">21</div>

    <div class="column-header style-scope seg-scheduler">22</div>

    <div class="column-header style-scope seg-scheduler">23</div>
    <template is="dom-repeat" index-as="index" class="style-scope seg-scheduler"></template>
  </div>
  <div class="row style-scope seg-scheduler">
    <!-- 12 hr time -->
    <div class="column-header style-scope seg-scheduler"></div>

    <div class="column-header style-scope seg-scheduler">12</div>

    <div class="column-header style-scope seg-scheduler">1</div>

    <div class="column-header style-scope seg-scheduler">2</div>

    <div class="column-header style-scope seg-scheduler">3</div>

    <div class="column-header style-scope seg-scheduler">4</div>

    <div class="column-header style-scope seg-scheduler">5</div>

    <div class="column-header style-scope seg-scheduler">6</div>

    <div class="column-header style-scope seg-scheduler">7</div>

    <div class="column-header style-scope seg-scheduler">8</div>

    <div class="column-header style-scope seg-scheduler">9</div>

    <div class="column-header style-scope seg-scheduler">10</div>

    <div class="column-header style-scope seg-scheduler">11</div>

    <div class="column-header style-scope seg-scheduler">12</div>

    <div class="column-header style-scope seg-scheduler">1</div>

    <div class="column-header style-scope seg-scheduler">2</div>

    <div class="column-header style-scope seg-scheduler">3</div>

    <div class="column-header style-scope seg-scheduler">4</div>

    <div class="column-header style-scope seg-scheduler">5</div>

    <div class="column-header style-scope seg-scheduler">6</div>

    <div class="column-header style-scope seg-scheduler">7</div>

    <div class="column-header style-scope seg-scheduler">8</div>

    <div class="column-header style-scope seg-scheduler">9</div>

    <div class="column-header style-scope seg-scheduler">10</div>

    <div class="column-header style-scope seg-scheduler">11</div>
    <template is="dom-repeat" class="style-scope seg-scheduler"></template>
  </div>
</div>
<div class="time">
  <div class="style-scope seg-scheduler">AM</div>
  <div class="style-scope seg-scheduler">PM</div>
</div>
</div>

关于html - 尝试在我的日历中为上午/下午做一个 colspan，但对于 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41248723/

文章推荐： html - 为什么我的 html 页面显示半页？

文章推荐： html - 将可缩放图像定位在其他图像之上

文章推荐： javascript - 下拉菜单与其他菜单重叠

javascript - 为什么我不能使用 .colspan 设置该元素的 colspan？
根据我对 JavaScript 的理解，任何属性都可以使用 element.attribute = newValue 设置。因此，我尝试使用 element.colspan = 2 设置多个表格单元格
jquery - 使用 Jquery 将 Colspan = "2"替换为 Colspan = "4"
地点ID: 3 我想使用 JQuery 将第一个 TR 中未包含在完整页面中的第一个 Colspan="2"替换为 Colspan="4"。谢谢。最诚挚的问候，女士最佳答案这个 jQuery
html - 与 colspan ="2"和 .css "Select td with attribute colspan="2""连接的表格数据的中心文本
您好，我有一个表，其中一行中的某些列与 colspan="2" 属性相关联。此刻它看起来像这样: 我希望一行中连接的列的文本居中，但只有连接列中的文本该行的表格数据(无限制)有如下代码 u
javascript - 告诉表列的数量并将该数量作为顶部 colspan
我是否可以检查现有表中的列数并将其分配给该表 colspan 的顶部？ My code document.write('') document.write(' HEAD GRID ') for(i
javascript - Colspan 属性未从变量设置
我有一个表格，其中的单元格具有相同的值。我正在尝试使用 colspan 将它们合并在一起，但是为 colspan 设置属性没有任何效果。 https://jsfiddle.net/afn4f1q9/4
javascript - 左固定列与表 colspan
我已经使用了这个 .js 文件和以下方法。 https://code.jquery.com/jquery-3.3.1.js https://cdn.datatables.net/1.10.19/js/
html - 清除响应表中的 colspan
我有一个响应式表格(在可变 div 宽度内设置为 100% 宽度)，我试图在其中“重置”colspan，以便下一个表格行不会继承固定宽度 tds. 在我的示例中，数字 td(1 到 7)的固定宽度为
javascript - 单击按钮时调整 colspan
我的问题是，当我单击“span cell 1”按钮时，colspan 已正确完成，但头部 td 被扩展，并且随着表大小的增加，表布局受到干扰。它不能管理剩余的列吗？如果我单击跨度单元格 1 按钮，则
javascript - 在基于代码的数据表列设置中使用 colspan
这是第一个问题，所以请原谅我的任何错误。我正在使用 JQuery Datatables 插件，并且必须向表中添加两行带有 colspan 的列标题。在 HTML 中硬编码没有问题，但现在我在表初始化
jquery - colspan 的响应式数据表问题
我使用的是响应式数据表并且工作正常，但问题出在 colspan 上。当我使用带有 colspan 属性的 td 标签时，页面使用此链接引发错误 datatables warning table id
HTML 表格 Colspan
我正在使用以下 HTML 代码制作日历: Mon Tue Wed T
html - 表列更改行为取决于内容 (colspan)
我有一张带有 colspan 的表，但表现不佳。请比较以下 fiddle : http://jsfiddle.net/lucaswiener/WBdc8/ http://jsfiddle.net/l
html - 突出显示表格列 + colspan
jsfiddle 链接:http://jsfiddle.net/KMzjp/ 所以我试图根据表头 th 元素突出显示表列(有三个 th 元素，所以应该有三列，中间一列突出显示). 它在没有 colsp
HTML 拆分表格单元格而不是使用 colspan
我有一个包含很多行和列的表格。现在我想像这样将 td "E8"分成两列: 什么是最好的解决方案？最佳答案单向: 您可以在同一行的所有其他单元格上使用 rowspan="2" 例子:
html - Colspan 扰乱了表格布局
请看下面的html: Event Name City Date Price
html - 电子邮件中的表 colspan
我正在尝试使用 colspan 使图像与表格中的右侧对齐，并使带有文本的行在左侧对齐。当图像在左侧时，此方法通常有效，但现在我希望它在右侧，但它不起作用。请记住这是针对 outlook 电子邮件的，因
html - Colspan 行为异常
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-top
html - colspan 和图像不工作
帮助!我在这里拔头发。我正在尝试 a) 在此表的第一行和第三行中执行 colspan，但它似乎不起作用。我希望两行都跨越三列，并且 b) 我无法显示图像并且我已经在网上进行了广泛的搜索并且已经解决了我
javascript - 自动表格布局和 colspan
我正在创建一个应用程序，它允许用户通过添加和删除列和行、设置列宽和单元格列跨度以及将元素插入表格单元格来操作表格结构。在测试时，我遇到了一个场景，其中 Firefox 4 和 Internet Exp
PHPExcel - colspan 主题名称
表名:主题我的预期输出我的代码 setActiveSheetIndex(0); $headers = array('School Name'); $objPHPExcel->get

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 尝试在我的日历中为上午/下午做一个 colspan，但对于 div