直接在<table>标签上写class属性即可，HTML原生支持，无需额外包裹或JS注入；需确保拼写正确、引号完整、无命名冲突，且类名以字母开头、用空格分隔多类，避免classname等错误属性名。
直接在 <table> 标签上写 class 属性就行
不需要额外包裹或 JS 注入，HTML 原生就支持。只要确保类名拼写正确、没和已有类冲突，CSS 就能生效。
常见错误现象：class="my-table" 写成了 classs="my-table"（多了一个 s），或者漏了引号；也有人误写成 classname="my-table" —— HTML 里只有 class，没有 classname。
-
<table class="data-table striped hoverable">：多个类名用空格分隔，不要逗号 - 类名避免用数字开头（如
1st-table），CSS 选择器会失效；建议用字母开头，如table-1st - 如果表格是后端模板（如 Django、Jinja）动态生成的，注意模板语法是否转义了引号，比如
class="{{ css_class }}"要确保css_class变量值不含非法字符
给 <tr>、<td> 单独加类名更灵活
只给 <table> 加类，控制的是整体样式（边框、宽度、字体等）；但真要高亮某行、标红某列、隐藏某单元格，就得深入到 <tr> 和 <td>。
使用场景：后台导出的订单表中，把“已发货”行标绿、“退款中”行标黄；或者数据表格里，让金额列右对齐、状态列居中。
立即学习“前端免费学习笔记（深入）”；
-
<tr class="status-shipped">比<tr><td class="status">已发货</td></tr>更利于批量控制整行样式 -
<td class="numeric align-right">12,500.00</td>可同时应用数字格式 + 对齐，比用内联style更易维护 - 避免在每个
<td>上重复写相同类（如全列都加text-center），优先用 CSS 的tbody td:nth-child(3)选择器统一处理
用 JavaScript 动态加类要注意时机和作用域
如果表格内容是 AJAX 加载或 Vue/React 渲染出来的，document.querySelector('table').classList.add('loaded') 必须等 DOM 真正插入后再执行，否则查不到元素。
性能影响：频繁调用 element.classList.add() 或 className = '...' 触发重排；尤其在循环给几十行加类时，建议先用 DocumentFragment 或一次性操作 innerHTML 后再统一加类。
- 错误写法：
rows.forEach(r => r.className = 'active')—— 会覆盖原有类；应改用r.classList.add('active') - Vue 场景下，别在
v-for中硬编码:class="{ 'highlight': item.id === selectedId }"，而应提前计算好类名数组传入，减少响应式开销 - React 中用
className={["base", isOdd ? "odd" : "even"].filter(Boolean).join(" ")}，比字符串拼接更安全
类名命名不规范会导致 CSS 层叠失效
很多人写了 class="table table-bordered table-striped"，结果发现 table-striped 的斑马纹没出来 —— 很可能是因为自定义 CSS 里 .table { background: #fff; } 把 <tr> 的背景色盖掉了，而 table-striped 依赖 tr:nth-child(odd) 的背景设置。
兼容性影响：CSS 类名本身无兼容问题，但若用了 BEM 风格如 table__cell--error，又没配对应预处理器或构建工具，手写 CSS 时容易漏掉层级关系。
- 避免过度嵌套类名：不用
table-wrapper-inner-content-cell，用语义化短名如cell-error或cell-urgent - 全局类名（如
hidden、sr-only）慎用，可能和第三方库（Bootstrap、Tailwind）冲突；可加前缀如my-hidden - 用浏览器开发者工具检查元素时，留意
Computed面板里实际生效的样式来源 —— 经常是某个更宽泛的选择器（如td）把你的.cell-numeric覆盖了
