html5已弃用table的width/height属性，因其在table-layout: auto下仅作参考且高度几乎无效；可靠方案是table-layout: fixed配合width、min-width及设置列宽，并用min-height+overflow-y控制高度。
直接用 width 和 height 属性控制 <table> 标签，现在基本不可靠——HTML5 已弃用这些属性，浏览器兼容性差，且无法响应内容变化或父容器约束。
<h3>为什么 table 的 width/height 属性经常不生效</h3>
<p>核心原因是浏览器默认采用 <code>table-layout: auto，此时表格宽度由内容自然撑开，width 只起“参考作用”，height 更是几乎无效（内容一多就自动拉高）。
<table width="600"> 在 Chrome/Firefox 中可能被忽略，尤其当父容器窄于 600px 时 <li><code><table height="300"> 不会截断内容，也不会强制最小高度，只是个摆设 <li>给 <code><tr> 或 <code><td> 单独设 <code>height，优先级高于<table>，但依然受内容和行内换行影响 <h3>真正可控的 CSS 方案：table-layout + width 组合</h3> <p>要让宽度可预期、可约束，必须显式声明 <code>table-layout: fixed，并搭配width值作为基准。-
table { width: 100%; table-layout: fixed; }—— 这是所有可靠列宽控制的前提 - 只写
table-layout: fixed不写width，多数浏览器会退回到自动宽度，min-width/max-width也失效 - 若需最小宽度限制，必须三者共存：
width: 100%; min-width: 400px; table-layout: fixed; - 高度控制改用
min-height（如min-height: 200px;），配合overflow-y: auto实现滚动容器
精确列宽必须用
，不是 td.style.width 给
<td> 写 <code>style="width: 120px"很容易被内容顶开，尤其短文本列会被压缩、长文本列会撑爆整列。真正稳定的方式是<colgroup></colgroup>+<col>。-
<col>必须紧跟在<table> 开始标签后、<code><thead> 前，顺序错一位就全无效 <li>示例：<code><col style="width: 100px"> <col style="width: 30%">，第一列固定，第二列按比例分配剩余空间 - 想加最小约束？得配合
table-layout: fixed和td { min-width: 100px; }，单独写min-width在<col>上无效 - 注意：百分比总和超 100% 会触发横向滚动条，务必校验
-
td { padding: 8px 12px; line-height: 1.4; }—— 控制单元格内部垂直空间 -
table { min-height: 180px; }+tbody { display: block; max-height: 150px; overflow-y: auto; }—— 实现带滚动的固定区域 - 如果真要等高行，
tr { height: 40px; }在table-layout: fixed下才稳定，否则会被内容顶破 - 避免用
transform: scale()缩小表格——它不改变文档流，会导致点击区域错位、打印异常
高度控制别硬塞 height，优先用 min-height + padding + line-height
现代页面中，固定表格高度既难维护又破坏可访问性。更实际的做法是放弃
height，转而用组合方式“引导”视觉高度。最常被忽略的一点：边框、padding、box-sizing 全部参与最终尺寸计算。没设
box-sizing: border-box的表格，width: 100%加上 1px 边框就会溢出父容器。-
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
