直接在<table>标签上加class属性即可，HTML原生支持，需确保类名规范、拼写正确为class而非classname，并注意多类名空格分隔、变量注入转义、层级优先级、语义化命名及BEM规范等实践要点。
直接在 <table> 标签上加 class 属性就行
不需要额外封装或 JS 操作，HTML 原生就支持。只要确保类名不带空格、不以数字开头、不包含特殊符号（如 .、#），就能被 CSS 正确识别。
常见错误是把 class 写成 classname 或 Class——HTML 属性名严格区分大小写吗？不区分，但必须拼写为 class，否则浏览器完全忽略。
-
<table class="data-table striped hoverable">是合法的，多个类名用空格分隔 - 如果类名来自变量（比如模板渲染），注意转义：避免用户输入注入空格或引号导致 HTML 结构断裂
- 不要写成
<table class="data-table,">——末尾逗号会让整个类名失效
class 放在 <thead>、<tr>、<td> 上也有效
表格结构复杂时，常需要局部样式控制。比如只给第一行加背景色、某列右对齐、特定单元格标红，这时就得把 class 下沉到具体标签。
注意层级优先级：CSS 中 td.highlight 会覆盖 table.data-table td，除非后者用了 !important——这通常说明样式组织有问题。
立即学习“前端免费学习笔记（深入）”；
-
<tr class="warning-row">可用于标记异常数据行 -
<td class="numeric right-align">123.45</td>比用style="text-align:right"更易复用和维护 - 避免在
<th>上滥用class="col-1"这类语义模糊的命名，改用class="price-col"更利于协作
用 JavaScript 动态添加类名要小心重复和状态残留
比如点击某行高亮，再点取消——如果只是反复调用 element.classList.add("active")，不会自动去重，也不会清除旧状态。
推荐用 classList.toggle() 处理开关类，用 classList.replace() 替换状态类，而不是手动 remove() + add()。
-
row.classList.toggle("selected")安全可靠，不用判断当前有没有该类 - 批量操作时别用
setAttribute("class", "...")，它会覆盖所有已有类名 - 动态生成的表格（如 AJAX 加载后插入 DOM），记得在插入后立即处理类名逻辑，别依赖
DOMContentLoaded——那时节点可能还没存在
类名冲突和 BEM 风格建议
当多个团队共用一套 CSS，或者引入第三方组件（如 Bootstrap 表格样式），table-striped 这种通用名极易被意外覆盖或干扰。
简单项目可用前缀隔离：myapp-table-striped；中大型项目建议采用 BEM 规范，比如 order-table + order-table__header + order-table__cell--urgent。
- 避免纯功能类名如
red、big，改用语义化名称如error-cell、large-amount - 不要用
id控制样式——它无法复用，且 CSS 优先级过高，后期难覆盖 - 如果表格嵌套在 Shadow DOM 或 Web Component 里，外部定义的
.data-table td默认不生效，得用:host .data-table td或all: initial显式继承
class="fix" 可能半年后谁也看不懂到底修了什么。 
