HTML表格边框真正显示需三步：设border-collapse: collapse合并边框，给table设外边框，再给th/td设内边框；仅用border="1"或未设collapse会导致双线、断开或不显示。
表格边框怎么加才真正显示出来
HTML <table> 默认没有可见边框，光写 border="1" 或 CSS border 不一定生效——关键看是否设置了 border-collapse。浏览器默认是 separate，单元格边框会重叠或留缝，公告栏看起来像“散装”。
- 必须显式设置
border-collapse: collapse，否则border可能只在部分边显示 -
border="1"是过时写法，现代项目统一用 CSS 控制更可靠 - 如果用了
th和td，记得给它们也设border，否则内部线会断开
公告栏常用结构怎么组织才清晰
公告栏不是普通数据表，重点在标题醒目、内容易读、视觉聚焦。别用 <thead>/<tbody> 套太多层，简单三行足够：标题行、内容行、底部提示行（可选）。
- 标题用
<th>并设scope="col"，语义正确且方便屏幕阅读器识别 - 正文用
<td>，避免混用<th>造成样式混乱 - 整行需要背景色（比如标题灰底白字），直接给
<tr>加background-color，别只涂<th>
<table style="border-collapse: collapse; width: 100%;">
<tr>
<th style="background: #4a5568; color: white; padding: 12px; text-align: left;" colspan="2">? 紧急公告</th>
</tr>
<tr>
<td style="border: 1px solid #e2e8f0; padding: 10px;">时间</td>
<td style="border: 1px solid #e2e8f0; padding: 10px;">2024-06-15 14:30</td>
</tr>
<tr>
<td style="border: 1px solid #e2e8f0; padding: 10px;">内容</td>
<td style="border: 1px solid #e2e8f0; padding: 10px;">系统将于今晚22:00维护30分钟，请提前保存工作。</td>
</tr>
</table>
移动端缩放和文字换行怎么不崩
公告栏常嵌在响应式页面里，table 默认不响应式，小屏下横向滚动或文字挤成一团。不能只靠 width: 100% 解决。
- 给
<table>加table-layout: fixed，配合width才能强制等宽列 - 长文本内容列用
word-break: break-word，防止超长英文或URL撑破表格 - 避免在
<td>里写死width，改用min-width配合max-width - 如果公告内容极简（如单条消息），考虑用
display: table的 div 替代原生<table>，更易控制
为什么 border-color 没生效还带阴影
有时候写了 border: 1px solid #999，结果边框是模糊的灰色，甚至带奇怪阴影——大概率是父容器或全局 CSS 注入了 box-shadow 或 outline，或者用了 border-style: outset 这类有立体感的样式。
立即学习“前端免费学习笔记（深入）”；
- 检查开发者工具里
<table>和<td>的 computed styles，确认最终生效的border-color和border-style - 禁用所有继承来的
box-shadow，尤其注意某些 UI 框架（如 Bootstrap）对table的默认修饰 - 如果要纯平边框，务必指定
border-style: solid，别依赖默认值 - 深色主题下，
#999可能太浅，建议用#cbd5e0这类中性灰，对比更稳
border-collapse 就会失效。 
