table加border属性无反应是因为html5已废弃该属性，必须用css三要素（border:1px solid #333；border-collapse:collapse；th,td也设border）配合才能显示清晰实线外框。
table 元素加 border 为什么没反应？
直接写 <table border="1"> 看不到外边框，不是你代码错了，而是 HTML5 已废弃该属性——它不合法、不语义化，且现代浏览器（尤其严格模式下）可能直接忽略。即使渲染出来，也默认用「分离边框模型」，导致外框和内线不统一，根本不是你要的干净实线。
<h3>必须同时设置 <code>border 和 border-collapse: collapse
只给 <table> 加 <code>border: 1px solid #000 还不够，必须配合 border-collapse: collapse 才能真正让外边框显形并保持单线效果。否则，<th> 和 <code><td> 的边框会跟表格自身边框打架，视觉上变粗或错位。
<ul><li>
<code>border-collapse: collapse 必须写在 <table> 上，写在 <code><td> 或 <code><tr> 无效
<li>即使只想要外边框，<code><th> 和 <code><td> 也得设 <code>border，否则内部无分隔线，看起来像一块板子
border-spacing: 0 更稳妥，虽然 collapse 下它自动失效，但防其他样式污染怎么写才保证外边框是清晰实线？
关键在于三个要素缺一不可：宽度 + 样式 + 颜色。漏掉任一个，border 就不生效。比如 border: 1px solid 缺颜色，或 border: #333 缺宽度和样式，都会白写。
- 样式必须用
solid，dashed、dotted、double都不是实线 - 宽度推荐用具体像素值（如
1px），避免thin/medium，不同浏览器渲染差异大 - 颜色可用十六进制（
#000）、rgb（rgb(0,0,0)）或关键字（black），但不能留空
table {
border: 1px solid #333;
border-collapse: collapse;
border-spacing: 0;
}
th, td {
border: 1px solid #333;
padding: 8px;
}
为什么 class 比内联 style 更可靠？
手写 style="border: ..." 容易漏掉某个 <td>，或嵌套表格时误伤子表。用 class 统一控制，既避免遗漏，又方便后续改颜色/粗细。
<ul>
<li>定义 <code>class="table-border"，CSS 里用后代选择器 .table-border th, .table-border td 精准命中
table tr td，它会把所有嵌套表格的单元格都套上边框min-height 或填充内容验证<table> 默认高度为 0，<code>border 画出来了你也看不见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
