用实现固定格子布局最省力，需设table-layout: fixed、显式宽高、border-collapse: collapse，用data-index标识并居中，旋转动画应套容器而非表格本身。
用 <table> 实现固定格子布局，别碰 <code>position: absolute
HTML 表格本身是天然的二维网格，做抽奖盘这种“固定行列+等宽高格子”的场景，<table> 比 CSS Grid 或 Flex 更直接、更可控。强行用 <code>position: absolute 堆叠 <div> 容易错位、响应失灵，还难维护。
<p>关键不是“能不能”，而是“该不该”——表格语义虽不完美，但这里它就是最省力的工具。</p>
<ul><li>每行用 <code><tr>，每格用 <code><td>，显式声明 <code>rows 和 cols 数量（比如 3×3 或 4×4）
<table> 设 <code>width 和 height，再用 table-layout: fixed 锁定单元格尺寸计算逻辑
<td> 内部用 <code>text-align: center + vertical-align: middle 居中内容，避免依赖 padding 硬调
border-collapse: collapse，cellpadding="0"，cellspacing="0"
让每个格子可点击且视觉反馈一致，用 data-index 而非 id
抽奖盘本质是“点一个格子 → 触发结果”，不需要 DOM 唯一 ID。用 data-index 存逻辑序号（从 0 开始），既轻量又方便映射到后端奖品数组。
常见错误是给每个 <td> 加 <code>id="cell-0" 这类冗余标记，结果 JS 里还得 parseInt(id.split('-')[1]) 解析——多此一举。
- 写法示例：
<td data-index="5">一等奖</td> - JS 绑定事件时直接
cell.dataset.index取值，类型是字符串，转数字用+e.target.dataset.index就行 - 视觉反馈统一加
:hover和:active，不要用 JS 切 class，除非要防连点 - 移动端注意加
cursor: pointer，iOS Safari 对<td> 的点击热区识别有时不准，可补 <code>touch-action: manipulation旋转动画不能靠
<table> 自身，得套一层容器 <p>表格元素不支持 <code>transform: rotate()动画（尤其 IE/旧 Edge 下会崩），硬加会导致单元格错位或文字翻转。正确做法是把整个<table> 包进一个 <code><div class="wheel-container">，对这个容器做旋转。 <p>这样还能隔离动画副作用：比如旋转时想冻结格子内文字方向，只需给 <code><td> 单独加 <code>transform: rotate(-Xdeg)反向抵消，而不用动表格结构。- 容器设
position: relative，overflow: hidden防动画溢出 - 旋转用
transform: rotate(360deg)+transition: transform 3s ease-out - 若需“指针固定、盘转动”，指针元素必须脱离文档流（
position: absolute），且层级高于容器（z-index） - 动画结束后重置容器
transform为rotate(0)，否则下次起始角度会累加
IE11 兼容性陷阱：
transform和dataset必须降级如果目标用户还有 IE11，两个地方会直接报错：
element.dataset.index不支持，transform动画需要-ms-前缀且不支持ease-out缩写。别指望 Babel 或 PostCSS 自动修这些——它们只管 JS 语法和 CSS 属性名，不管运行时 API 和动画关键字兼容性。
- 读取 data 属性改用
getAttribute('data-index')，稳妥且全浏览器支持 - CSS 里写两遍：
transform: rotate(360deg); -ms-transform: rotate(360deg); - 缓动函数降级为
ease（IE 不认ease-out），或用贝塞尔曲线cubic-bezier(0.25, 0.46, 0.45, 0.94) - 动画结束监听用
transitionend，但 IE11 只触发MSAnimationEnd，需同时监听两个事件
真正麻烦的不是写法，而是测试——很多团队只在 Chrome 里点几下就上线，结果 IE 用户点不动、转不起来，问题卡在最基础的交互层。
- 容器设
