不推荐用<table>布局计算器按钮。现代应使用<div>+CSS Grid/Flexbox；若强制用<table>，需用<input type="button">、清除默认边距、显示区设readonly和tabindex="-1"，避免type="number"，并注意DOM绑定陷阱与IE8兼容性限制。
用 <table> 布局计算器按钮是否还合适？
不推荐。现代浏览器中 <table> 仅用于语义化表格数据，用它排计算器按钮会破坏可访问性、响应式适配困难，且 CSS 控制力弱。你看到的老教程多是 2000 年代初的写法，现在屏幕尺寸多样，<table> 的固定行列结构会让按钮在手机上挤成一团或溢出。
真正简单又健壮的做法是：用 <div> + CSS Grid 或 Flexbox。但如果你明确被要求“必须用 <table> 和 <input>”，比如课程作业或遗留系统维护，那得知道怎么绕过它的天然缺陷：
-
<input type="button">比<button>更容易被<table>容纳（部分老 IE 对<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 绑定陷阱
老式写法常把 JS 写在 HTML 属性里（如 onclick="calc()"），看似能跑，但一旦按钮动态增删或逻辑变复杂，就难调试。更隐蔽的问题是：如果 <table> 被包裹在 <form> 内，且某个按钮没设 type="button"，点击时浏览器会默认提交表单，页面刷新，JS 中断。
安全做法是分离结构与行为：
- 给所有按钮加统一 class，比如
class="calc-btn" - 用
document.querySelectorAll('.calc-btn').forEach(...)批量绑定事件，而不是靠内联onclick - 确保
<table>外层没有无意包裹的<form>标签 - 检查控制台是否有
Uncaught ReferenceError—— 很可能是append()函数定义在<script>标签里，但该标签放在了<table>后面，DOM 解析时函数还没声明
兼容性底线：IE8 及以下必须放弃
如果你真要支持 IE8，<table> 布局反而成了唯一选择（因为当时 Grid/Flex 还不存在）。但代价是：无法用 let/const、不能用 addEventListener（得用 attachEvent）、querySelectorAll 不支持。此时建议直接用内联 onclick + 全局函数，并把 JS 放在 </body> 前。
现实中，只要不是政企内网等极端场景，现在连 Chrome 都已停止支持 IE 兼容模式。硬塞 <table> 唯一会增加维护成本的地方，就是当某天需要加个“百分号”按钮时，你得反复调 colspan 和 rowspan 来对齐，而用 Grid 只需改一行 grid-area。
真正的简单，不是代码行数少，而是改起来不心慌。这点最容易被忽略。
