用 table 实现固定格子布局，设固定宽高、table-layout: fixed、统一行高、border-collapse: separate + border-spacing: 0，td 内 text-align: center、vertical-align: middle、white-space: nowrap，并用 data-index 映射奖品，移动端用 scale 缩放适配。
用 table 实现固定格子布局，别碰 position: absolute
HTML 表格本身是天然的网格容器，适合做等宽高、行列对齐的抽奖盘。强行用 div + absolute 定位反而容易错位、响应式失效，还增加计算负担。
关键不是“怎么画圆”，而是“怎么让每个奖品格子严格占位”。用 table 时，所有 td 默认按行优先排列，且支持 rowspan/colspan 合并单元格——这对中心转盘按钮或特殊大奖格特别有用。
- 给
table设定固定width和height（比如400px），再用table-layout: fixed锁定列宽计算逻辑 - 每行
tr高度统一设为height: 100px，避免内容撑开导致格子不方 - 禁用
border-collapse: collapse时留白太多？改用border-collapse: separate+border-spacing: 0
td 内部内容居中且不换行，用 white-space: nowrap
抽奖盘格子里通常只放一个词（如“谢谢参与”“iPhone 15”），文字必须居中、不折行、不溢出。默认 td 会随内容伸缩，破坏网格整齐性。
- 给所有
td加text-align: center和vertical-align: middle - 加
white-space: nowrap防止长文本换行挤乱高度 - 必要时用
font-size: 14px控制字号，避免文字撑破格子 - 如果奖品名太长，宁可截断：加
overflow: hidden+text-overflow: ellipsis
点击触发抽奖时，别直接操作 table DOM，用索引映射逻辑
用户点某个格子，你得知道它对应第几行第几列，才能匹配奖品数组。硬写 event.target.parentNode.rowIndex + event.target.cellIndex 看似快，但一旦中间加了 thead 或合并单元格，索引就全乱了。
- 初始化时遍历
table.querySelectorAll('td')，给每个td加data-index="0"、data-index="1"…顺序编号 - 点击事件里读
event.target.dataset.index，直接查prizes[parseInt(index)] - 避免用
id拼接（如cell-2-3），维护成本高，且动态增删格子时难同步
移动端适配：别靠 vw 或 %，用 max-width + scale
在小屏上硬把 400px 宽表格塞进 375px 屏幕，会导致横向滚动或文字挤压。CSS 媒体查询调 font-size 或 padding 效果有限，最稳的是整体缩放。
- 包裹
table的外层容器设max-width: 100%和overflow: hidden - 对
table本身加transform: scale(0.8)（配合transform-origin: center） - 用
@media (max-width: 480px)触发缩放，比例按实际测试定（0.7–0.9 之间） - 注意：
scale会影响点击热区，务必测试真机 touch 事件是否精准
真正麻烦的不是画格子，是保证每次点击都落在预期格子上——尤其缩放后坐标偏移、iOS Safari 的 click 延迟、以及 td 边框抗锯齿带来的视觉误差。这些细节不测真机根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
