如何实现日式榻榻米垫布局样式？寻求非表格灵活方案

一、修复表格布局的崩溃问题 #

你的表格布局崩溃核心原因是各行合并后的总列数不统一：第一行合并后总列数为6，但最后一行仅为4，浏览器无法正确渲染网格结构。以下是修正后的代码，确保每行合并后的列数一致为6：

table {
  width: 400px;
  height: 400px;
  border-collapse: collapse;
}
td {
  border: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td rowspan="2"></td>
      <td colspan="2"></td>
      <td colspan="2"></td>
      <td rowspan="2"></td>
    </tr>
    <tr>
      <td rowspan="2"></td>
      <td colspan="2"></td>
      <td rowspan="2"></td>
    </tr>
    <tr>
      <td rowspan="2"></td>
      <td></td>
      <td></td>
      <td rowspan="2"></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="2"></td>
      <td colspan="2"></td>
      <td></td>
    </tr>
  </tbody>
</table>

二、使用CSS Grid实现更灵活的布局 #

表格布局在响应式调整和样式灵活性上有局限，推荐用CSS Grid来实现，它专门用于二维网格布局，代码更清晰，扩展性更强：

.tatami-grid {
  display: grid;
  width: 400px;
  height: 400px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  background-color: #333;
}
.tatami {
  background-color: #f0e6d6;
}
/* 对应榻榻米图案的位置合并 */
.tatami-1 { grid-row: 1 / 3; grid-column: 1 / 2; }
.tatami-2 { grid-row: 1 / 2; grid-column: 2 / 4; }
.tatami-3 { grid-row: 1 / 2; grid-column: 4 / 6; }
.tatami-4 { grid-row: 1 / 3; grid-column: 6 / 7; }
.tatami-5 { grid-row: 2 / 4; grid-column: 2 / 3; }
.tatami-6 { grid-row: 2 / 3; grid-column: 3 / 5; }
.tatami-7 { grid-row: 2 / 4; grid-column: 5 / 6; }
.tatami-8 { grid-row: 3 / 5; grid-column: 1 / 2; }
.tatami-9 { grid-row: 3 / 4; grid-column: 3 / 4; }
.tatami-10 { grid-row: 3 / 4; grid-column: 4 / 5; }
.tatami-11 { grid-row: 3 / 5; grid-column: 6 / 7; }
.tatami-12 { grid-row: 4 / 5; grid-column: 2 / 4; }
.tatami-13 { grid-row: 4 / 5; grid-column: 4 / 6; }

<div class="tatami-grid">
  <div class="tatami tatami-1"></div>
  <div class="tatami tatami-2"></div>
  <div class="tatami tatami-3"></div>
  <div class="tatami tatami-4"></div>
  <div class="tatami tatami-5"></div>
  <div class="tatami tatami-6"></div>
  <div class="tatami tatami-7"></div>
  <div class="tatami tatami-8"></div>
  <div class="tatami tatami-9"></div>
  <div class="tatami tatami-10"></div>
  <div class="tatami tatami-11"></div>
  <div class="tatami tatami-12"></div>
  <div class="tatami tatami-13"></div>
</div>

这种方式可以轻松调整网格大小、间距，甚至通过媒体查询实现响应式布局，比表格布局更符合现代前端开发的需求。

内容的提问来源于stack exchange，提问作者Andreas Burmester