直接给<table>标签添加唯一合法的id属性（如id="user-table"）是最简洁有效的做法，可精准控制表格及内部元素样式，避免污染全局和维护困难。
给 <table> 标签直接加 id 属性就行
不需要包裹容器、不依赖 class、也不用 JS 动态生成 —— 最直接有效的方式，就是把 id 写在 <table> 开始标签里。比如：<table id="user-table">。这样后续所有 CSS 选择器都能以这个 ID 为锚点精准作用于该表格及其内部元素。
id 值必须唯一且符合命名规则
一个页面里不能有两个 id="user-table"，否则 CSS 和 JS 行为不可靠（浏览器可能只认第一个，或完全忽略）。同时要注意：
-
id不能以数字开头，id="1st-table"是非法的，应写成id="first-table" - 只允许字母、数字、连字符
-、下划线_，不能含空格或点号（.）、@、$ 等符号 - 区分大小写：
id="DataTable"和id="datatable"是两个不同 ID
用 #id 在 CSS 中精准控制表格样式
有了唯一 ID，就能写出不污染全局的样式规则。常见用法包括：
- 整张表设置边框合并：
#user-table { border-collapse: collapse; } - 只影响这张表里的
<th>：#user-table th { background-color: #f0f9ff; } - 定位第 2 行第 3 列的单元格：
#user-table tr:nth-of-type(2) td:nth-of-type(3) { font-weight: bold; } - 避免误伤其他表格：即使页面还有
<table class="summary">，它的<td>也不会被上面的规则影响
别把 id 加在 <tr> 或 <td> 上替代表格级控制
虽然技术上可以给单个 <td> 加 id，但这是反模式：
立即学习“前端免费学习笔记（深入）”；
- 破坏语义：表格结构本应由
<table>统一承载，分散 ID 让样式逻辑碎片化 - 难以维护：要改整行样式就得挨个改多个
id，而用#user-table tr:nth-of-type(3)一行就搞定 - 性能隐患：大量唯一 ID 会拖慢 CSS 引擎查找效率，尤其在复杂 DOM 中
真正需要单独控制某个单元格时，优先考虑 class 或伪类（如 :nth-child()），而不是滥用 id。
