不推荐用布局计算器按钮。现代应使用+css grid/flexbox；若强制用，需用、清除默认边距、显示区设readonly和tabindex="-1"，避免type="number"，并注意dom绑定陷阱与ie8兼容性限制。
用 <table> 布局计算器按钮是否还合适？
<p>不推荐。现代浏览器中 <code><table> 仅用于语义化表格数据，用它排计算器按钮会破坏可访问性、响应式适配困难，且 CSS 控制力弱。你看到的老教程多是 2000 年代初的写法，现在屏幕尺寸多样，<code><table> 的固定行列结构会让按钮在手机上挤成一团或溢出。
<p>真正简单又健壮的做法是：用 <code><div> + CSS Grid 或 Flexbox。但如果你明确被要求“必须用 <code><table> 和 <code><input>”，比如课程作业或遗留系统维护，那得知道怎么绕过它的天然缺陷：
-
<input type="button"> 比 <button></button> 更容易被 <table> 容纳（部分老 IE 对 <code><button></button> 在单元格内渲染异常）
- 所有按钮单元格必须设
style="padding: 0; margin: 0;"，否则默认内边距会让对齐错乱
- 显示区不能用
<input type="text"> 就完事——要加 readonly 和 tabindex="-1"，否则键盘焦点会跳进输入框干扰操作流
<input> 类型选 text 还是 number？
显示结果用 <input type="text" readonly>。别用 type="number" —— 它会自动过滤掉 "+"、"-"、"*"、"(" 等符号，导致表达式无法完整显示；而且在 Safari 中按退格键可能直接清空整字段。
运算按钮的 <input> 统一用 type="button"，不要用 submit 或 reset，避免触发表单提交刷新页面。示例关键片段：
<input type="text" id="display" value="0" readonly tabindex="-1"><input type="button" value="7" onclick="append('7')"><input type="button" value="+" onclick="append(' + ')">
为什么 <table> 里按钮点击没反应？常见 DOM 绑定陷阱
<p>老式写法常把 JS 写在 HTML 属性里（如 <code>onclick="calc()"），看似能跑，但一旦按钮动态增删或逻辑变复杂，就难调试。更隐蔽的问题是：如果 <table> 被包裹在 <code><form></form> 内，且某个按钮没设 type="button"，点击时浏览器会默认提交表单，页面刷新，JS 中断。
<input type="button"> 比 <button></button> 更容易被 <table> 容纳（部分老 IE 对 <code><button></button> 在单元格内渲染异常）
style="padding: 0; margin: 0;"，否则默认内边距会让对齐错乱<input type="text"> 就完事——要加 readonly 和 tabindex="-1"，否则键盘焦点会跳进输入框干扰操作流
<input> 类型选 text 还是 number？
显示结果用 <input type="text" readonly>。别用 type="number" —— 它会自动过滤掉 "+"、"-"、"*"、"(" 等符号，导致表达式无法完整显示；而且在 Safari 中按退格键可能直接清空整字段。
运算按钮的 <input> 统一用 type="button"，不要用 submit 或 reset，避免触发表单提交刷新页面。示例关键片段：
<table> 里按钮点击没反应？常见 DOM 绑定陷阱
<p>老式写法常把 JS 写在 HTML 属性里（如 <code>onclick="calc()"），看似能跑，但一旦按钮动态增删或逻辑变复杂，就难调试。更隐蔽的问题是：如果 <table> 被包裹在 <code><form></form> 内，且某个按钮没设 type="button"，点击时浏览器会默认提交表单，页面刷新，JS 中断。
安全做法是分离结构与行为：
- 给所有按钮加统一 class，比如
class="calc-btn" - 用
document.querySelectorAll('.calc-btn').forEach(...)批量绑定事件，而不是靠内联onclick - 确保
<table> 外层没有无意包裹的 <code><form></form>标签 - 检查控制台是否有
Uncaught ReferenceError—— 很可能是append()函数定义在<script></script>标签里，但该标签放在了<table> 后面，DOM 解析时函数还没声明 <h3>兼容性底线：IE8 及以下必须放弃</h3> <p>如果你真要支持 IE8，<code><table> 布局反而成了唯一选择（因为当时 Grid/Flex 还不存在）。但代价是：无法用 <code>let/const、不能用addEventListener（得用attachEvent）、querySelectorAll不支持。此时建议直接用内联onclick+ 全局函数，并把 JS 放在
