座位表应使用纯table布局，避免colspan/rowspan；每td设固定宽高、居中样式及data属性存数据；打印时需table-layout:fixed和word-break控制。

用 <table> 布局座位表，别碰 <code>colspan/rowspan 除非真需要

纯座位表（比如教室 5×6、会议室 8 排×10 列）直接用嵌套 <tr> 和 <code><td> 最稳。加 <code>colspan 或 rowspan 容易错位，尤其后期要改行数列数时——浏览器渲染会把合并单元格当“黑洞”，一动就塌。

实操建议：

• 先确定总行数、每行座位数，写死 <tr> 数量，每行内用循环生成 <code><td>（手写也行，20 个以内不费事） <li>每个 <code><td> 加 <code>class="seat"，方便统一控制宽高、边框、背景色
• 避免在 <td> 里塞 <code><div> 或 <code><p></p> —— 会让高度撑开、对齐变难；文字直接放 <td> 里，用 <code>text-align 和 vertical-align 居中

  td 的尺寸和居中必须显式设，不能靠内容撑

  浏览器默认 <td> 高度随内容变化，座位格子大小不一致，看起来像拼图。尤其姓名长度不同（“张三” vs “欧阳修远”）时更明显。 <p>必须加 CSS 控制：</p> <pre class="brush:php;toolbar:false;">td.seat { width: 60px; height: 40px; text-align: center; vertical-align: middle; border: 1px solid #ccc; font-size: 12px; }</pre> <p>注意：<code>vertical-align: middle 是对单元格内文本起效，不是对整个单元格在行内垂直居中（那是 align-items 的事，表格里不用 Flex）。

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载

  座位号/姓名填法：用 data- 属性存原始数据，显示用 textContent

  如果座位表要交互（比如点击选座、导出名单），别把姓名硬写进 HTML 文本里。否则 JS 拿数据得 innerText 解析，容易被空格、换行干扰。

  推荐写法：

  <td class="seat" data-seat-id="3-7" data-name="李明">李明</td>

  这样 JS 可以直接读：cell.dataset.name、cell.dataset.seatId，干净不歧义。如果某座位空着，data-name 留空或设为 null，<td> 里也留空，别写“空”或“—”，免得导出时混入无效数据。 <h3>打印时表格变形？加 <code>table-layout: fixed 和 word-break

浏览器默认 table-layout: auto，打印预览里长名字会把整列拉宽，其他列挤成细条。解决方法只有一条：

table {
  table-layout: fixed;
  width: 100%;
}
td.seat {
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

关键点：

• table-layout: fixed 让列宽严格按 width 或 col 设置走，不随内容伸缩
• word-break: keep-all 防止中文被强行断行（默认会按字断，导致“欧阳”换行）
• 如果姓名超长，text-overflow: ellipsis 必须配合 white-space: nowrap 和固定宽高才生效

真正麻烦的是跨页打印——<tr> 被切在页尾页首，座位号连不上。没银弹，要么手动加 <code><thead> 并设 <code>page-break-inside: avoid，要么导出 PDF 时用专门库处理分页。