使用 HTML、CSS 或 Javascript 在图像中重新创建时间表

Question

我想要重新创建的时间表

我需要使用 CSS、HTML 和 Javascript 创建时间表的帮助。我无法将 7:00-8:00 时间段的三个空白表格单元格与周二、周三、周四和周五的单元格对齐。

这是我的代码：

th {
  border: none;
  color: black; /* Text color */
  padding: 8px;
  text-align: center;
}

.cell1 {
  background-color: #006400; /* Green */
}

.cell1wd1 {
  height: 2px;
  width: 20px;
  padding: 2px 4px; /* Adjust top and bottom padding */
  font-size: 10px; /* Adjust font size if needed */
  white-space: nowrap; /* Prevent text wrapping */
}

.cell2 {
  background-color: #ffbec8; /* Green */
}

.cell3 {
  background-color: #808080; /* Green */
}

HTML：

<table cellspacing="1">
    <thead>
        <tr>
            <th>Time</th>
            <th class="cell1">Monday</th>
            <th class="cell2">Tuesday</th>
            <th class="cell3">Wednesday</th>
            <th class="cell1">Thursday</th>
            <th class="cell2">Friday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>7:00 - 8:00</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>8:00 - 9:00</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>9:00 - 10:00</td>
            <td class="cell1">CMSC 132</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Answer 1

不确定到底是什么问题。

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid white;
  padding: 8px;
}

th {
  text-align: center;
}

tr:not(:last-child)>:first-child, thead th:first-child {
  border-bottom: 1px solid #ccc;
}

tr>:nth-child(2), tr>:nth-child(5) {
  background-color: #006400;
  color: white;
}

tr>:nth-child(3), tr>:nth-child(6) {
  background-color: #ffbec8;
}

tr>:nth-child(4) {
  background-color: #808080;
  color: white;
}

<table>
    <thead>
        <tr>
            <th>Time</th>
            <th class="cell1">Monday</th>
            <th class="cell2">Tuesday</th>
            <th class="cell3">Wednesday</th>
            <th class="cell1">Thursday</th>
            <th class="cell2">Friday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>7:00</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>8:00</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>9:00</td>
            <td class="cell1">CMSC 132</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>