最快给单元格文字加删除线的方法是直接用 CSS 的 text-decoration: line-through，作用于 td 或 th 等文本容器，而非 tr、table 或 tbody；需注意继承问题，推荐搭配 color 和 text-decoration-color/thickness 精确控制样式，并优先使用语义化 <del> 标签配合强化 CSS 以兼顾可访问性。
直接用 text-decoration: line-through 最快
给单元格文字加删除线，最直白的做法就是 CSS 控制：td 或 th 里内容加类，然后设 text-decoration: line-through。它不依赖语义标签，兼容性好（IE8+ 都支持），也适合动态控制（比如 JS 切换状态）。
常见错误现象：只给 tr 设样式，结果整行没反应——因为 text-decoration 不会自动继承到子元素的文本上，除非子元素没覆盖该属性；更稳妥的是直接作用在文字容器（td、span 等）上。
- 推荐写法：
td.deleted { text-decoration: line-through; color: #d32f2f; }，加颜色提升可读性 - 注意继承问题：如果
td里嵌套了strong或span，它们可能默认没继承删除线，需显式加text-decoration: inherit - 别用
text-decoration: line-through套在table或tbody上——无效，浏览器不会向下穿透渲染
<del> 要用在每个 <td> 内部，不能包 <tr>
<del> 是语义正确、无障碍友好的选择，但 HTML 规范禁止它包裹 <tr>。试图写成 <del><tr>...</tr></del>，浏览器会自动“修复”结构，把 <del> 提到外面或丢弃，导致样式失效、DOM 错乱、屏幕阅读器读不出删除语义。
正确做法是把 <del> 放进每个单元格的内容里：
立即学习“前端免费学习笔记（深入）”；
<tr> <td><del>已取消订单</del></td> <td><del>¥299</del></td> <td><del>2026-07-15</del></td> </tr>
-
<del>必须配 CSS，否则默认删除线太细、颜色太浅，用户几乎看不见 - 不要混用
<s>：它已被 W3C 明确降级为纯表现标签，语义模糊，部分屏幕阅读器忽略，React/Vue 严格模式下会报 warning - 若需区分“已删除”和“待确认删除”，建议用不同 class（如
class="deleted"/class="pending-delete"），而不是靠标签切换
需要自定义删除线颜色或粗细？得用三属性组合
单靠 text-decoration: line-through 无法调颜色和粗细。要精确控制，必须同时设置三个属性：text-decoration-line、text-decoration-color、text-decoration-thickness。缺一不可，否则旧浏览器会完全忽略。
兼容性现实是：Chrome 90+、Firefox 97+、Safari 15.4+ 才稳定支持 text-decoration-thickness；text-decoration-color 支持稍广（Chrome 57+、Firefox 36+），但 IE 全系不支持。
- 安全写法示例：
td.custom-strike { text-decoration-line: line-through; text-decoration-color: #e53935; text-decoration-thickness: 2px; } - 不写
text-decoration-line？那另外两个属性无效 - 想用波浪线或虚线？
text-decoration-style: wavy或dotted可配合使用，但同样受兼容性限制 - 真要兼容 IE 或需动画效果（比如划线渐显），只能用
::after伪元素模拟——这时语义就交给 class 或数据属性承载，而非 HTML 标签
整行视觉删除 ≠ 语义删除，别跳过这个判断
给一行加删除线，背后意图可能完全不同：是记录编辑历史（该行被正式删除）、展示价格变更（原价失效）、还是仅作 UI 反馈（用户勾选后临时划掉）？每种场景对应的技术选择其实不一样。
容易被忽略的是：视觉划掉一行，但 DOM 里没标记语义，对屏幕阅读器用户就是“看不见的删除”。反过来，只加 <del> 却没配足够强的 CSS，等于没删——视力正常用户根本注意不到。
真正关键的不是“怎么画线”，而是“这条线代表什么”。<del> + 强化 CSS 适合前者；纯 class + text-decoration 适合后者；而伪元素方案，往往是为了绕开语义与样式的耦合限制，但代价是手动维护可访问性（比如加 aria-hidden 或 role="deletion"）。
