Tạo bảng lưu thông tin khách hàng trong ngày ở khách sạn

Đây là một ví dụ giả định về khách sạn có 22 phòng gồm 2 dãy B và C với số phòng ở mỗi dãy lần lượt lượt 10 và 12. Ta sẽ tạo bảng gồm 22 phòng với mỗi dãy là một hàng. Kết quả sẽ như sau:

Thêm code sau vào trong file CSS hoặc thẻ head > style ở trong file html:

.page {
  display: flex;
  flex-direction: column;
}
.sheet {
  width: 1280px;
  border: 1px solid black;
  background: #fff;
}
.row {
  display: flex;
}
.cell {
  border: 1px solid black;
  flex: 1 0 0px;
}
.cell.head {
  display: grid;
  place-content: center;
}

.cell:not(.head) {
  min-height: 350px;
}
.title {
  font-size: 20px;
  margin-bottom: 8px;
  margin-left: 16px;
  margin-top: 8px;
}

Chúng tôi sử dụng cấu trục html như sau để thể hiện các cell:

<section class='page'>
      <div class='title'>&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; / 2025</div>
      <div class='sheet'>
        <div class='row'>
          <div class='cell head'>C1</div>
          <div class='cell head'>C2</div>
          <div class='cell head'>C3</div>
          <div class='cell head'>C4</div>
          <div class='cell head'>C5</div>
          <div class='cell head'>C6</div>
          <div class='cell head'>C7</div>
          <div class='cell head'>C8</div>
          <div class='cell head'>C9</div>
          <div class='cell head'>C10</div>
          <div class='cell head'>C11</div>
          <div class='cell head'>C12</div>
        </div>
        <div class='row'>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
        </div>
        <div class='row'>
          <div class='cell head'>B1</div>
          <div class='cell head'>B2</div>
          <div class='cell head'>B3</div>
          <div class='cell head'>B4</div>
          <div class='cell head'>B5</div>
          <div class='cell head'>B6</div>
          <div class='cell head'>B7</div>
          <div class='cell head'>B8</div>
          <div class='cell head'>B9</div>
          <div class='cell head'>B10</div>
        </div>
        <div class='row'>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
          <div class='cell'></div>
        </div>
      </div>
    </section>