必须禁用默认边距和间距，给<table>设border-collapse: collapse并重置所有<td>的padding和margin；<button>需设width/height:100%并配合vertical-align: middle实现居中；须用data-type区分按钮语义；响应式下需table-layout: fixed配合百分比列宽。
用 <table> 布局按钮时，必须禁用默认边距和间距
浏览器对 <table> 有默认的 border-spacing 和单元格内边距，直接写会导致按钮之间出现不可控空隙，视觉上“不紧凑”。必须显式重置：
- 给
<table>加style="border-collapse: collapse; margin: 0; padding: 0;" - 给所有
<td>加style="padding: 0; margin: 0;"（或统一用 CSS 类） - 避免依赖
cellspacing="0"—— 这是过时属性，现代写法优先用 CSS
<button> 放在 <td> 里要处理垂直居中问题
默认情况下，<button> 在 <td> 中会因行高、字体大小、默认 padding 导致上下错位，尤其在多行布局中容易“浮起来”或“沉下去”。解决方法很直接：
- 给
<td>设置style="vertical-align: middle;" - 给
<button>设置style="width: 100%; height: 100%; margin: 0; padding: 8px 0;"（高度拉满，左右 padding 控制文字呼吸感） - 不要用
<input type="button">—— 它默认带不可控的边框和尺寸，<button>更可控
数字键与运算符键的语义区分影响键盘操作
如果后续要支持键盘输入（比如按 Enter 触发计算），仅靠 <table> 结构不够。必须为不同功能按钮加明确的 data-type 属性，否则 JS 无法区分“3”和“+”：
<button data-type="digit">3</button><button data-type="operator">+</button><button data-type="equals">=</button><button data-type="clear">C</button>
没有这个区分，keydown 监听时只能靠 textContent 判断，遇到多字符按钮（如 sin 或 ←）就容易误判。
立即学习“前端免费学习笔记（深入）”；
响应式下 <table> 的宽度控制比想象中麻烦
<table> 默认行为是“内容撑开”，在小屏上很容易横向溢出。不能只靠 width: 100% 解决：
- 给
<table>设style="width: 100%; table-layout: fixed;"—— 否则列宽由内容决定，按钮大小不一致 - 给每列
<td>设置width百分比（例如四列就设width: 25%），或用<col>标签统一定义 - 避免在
<button>上设固定像素宽 —— 小屏下会换行或溢出，改用width: 100%+max-width限制上限
真正难的是等比例缩放：CSS Grid 或 Flex 更适合响应式计算器，但如果你必须用 <table>，就得接受它在窄屏下需要额外 media query 调整 font-size 和 padding。
