Диаграмма гостей с использованием стола ⇐ Html

[Anonymous]

Я пытаюсь сделать диаграммы доступности комнаты или календарь, ожидаемый результат следующим образом:
< /p>
Каждая дата имеет 2 столбца Am и PM в качестве заголовка. AM указывает на регистрацию, пока PM указывает на выезд. Я сделал это два столбца, потому что будут случаи, когда в 1 комнате будет гостем выезд и продолжать с различным гостем регистрации. Период гостя, охватывая ячейки на основе даты пребывания и количества ночей. >







Stay Table

body {
font-family: Arial, sans-serif;
margin: 20px;
}

table {
width: 800px;
border-collapse: collapse;
margin-top: 20px;
}

th,
td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
width: 80px;
}

th {
background-color: #f2f2f2;
font-weight: bold;
}

.date-header {
background-color: #f2f2f2;
font-weight: bold;
}

.stay-cell-1 {
background-color: #e0f7fa;
}

.stay-cell-2 {
background-color: #ffebee;
}

.stay-cell-a,
.stay-cell-b {
border: none;
padding: 0;
}

.internal-table {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border-collapse: collapse;
}

.internal-table td {
background-color: #80deea;
height: 25px;
border: none;
text-align: center;
}








Room
Type















Подробнее здесь: https://stackoverflow.com/questions/794 ... sing-table