给或加红色边框必须同时指定border-width、border-style和border-color,仅设color无效;需用border: 2px solid red或分写三属性;单边控制须用border-left等复合属性;注意border-collapse影响显示。

直接给 <td> 或 <code><th> 加红色边框,必须写全 <code>border 三要素
只写 border-color: red 没用——浏览器默认 border-width: 0,等于没画线。边框要“显形”,得同时指定宽度、样式、颜色。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
-
border: 2px solid red是最简写法,三者齐全,立刻生效 - 分写也行:
border-width: 2px; border-style: solid; border-color: red - 别漏
solid(或dashed/dotted),none或空值会让边框消失
想只加左边框为红色?用方向性属性,但别漏设宽度和样式
单边控制靠 border-left 这类属性,不是只改 border-left-color 就完事。
- 正确:
border-left: 3px solid red(宽度+样式+颜色一步到位) - 错误:
border-left-color: red—— 没宽度、没样式,什么也看不到 - 想让上边透明但保留占位?用
border-top: 1px solid transparent,别用none(会彻底移除该边)
加了红色边框却看不见?大概率是 border-collapse 搞的鬼
默认 border-collapse: separate 下,<table> 和 <code><td> 的边框各自渲染,可能互相遮挡或错位。红色边框被压在底下,或者只显示一半。
<ul><li>加 <code>style="border-collapse: collapse;" 到 <table>,让相邻边框合并成一条线
<li>如果只想突出某个单元格,又怕 collapse 导致颜色被覆盖,可临时用 <code>outline: 2px solid red 替代(不参与布局,也不合并)
border-color: red 却没清掉其他单元格的默认边框,导致视觉混乱批量给某列单元格加红色边框,用 CSS 选择器更省事
手动给每个 <td> 写 <code>style 容易出错,尤其表格动态生成时。用 CSS 类或列选择器更稳。
- 给第 2 列所有
<td> 加右红边:<code>td:nth-child(2) { border-right: 2px solid red; } - 加 class 控制:
<td class="alert-cell"> + <code>.alert-cell { border: 2px solid red; } - 注意:
th和td默认样式不同,若表头也要统一,记得一起选中:th.alert-cell, td.alert-cell
真正容易被忽略的,是边框“存在”和“可见”之间的 gap:写了颜色不等于能看见,宽度和样式缺一不可;加了样式不等于能控住,collapse 模式下的层叠顺序会悄悄覆盖你的设定。动手前先确认这三点:有没有 width、有没有 style、有没有 collapse。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










