应使用带作用域前缀的Less嵌套（如.my-data-table）避免全局污染；通过参数化mixin控制表头高度与文字大小；hover和排序图标用嵌套+伪元素精准定位，IE11需显式设置display: table-cell。
Less嵌套怎么写表格表头样式才不污染全局？
直接在 .table th 里写样式容易被其他组件覆盖，或反过来干扰第三方表格库。Less 嵌套必须带明确作用域前缀，比如用 .my-data-table 包一层再嵌套：
.my-data-table {
th {
background: #f8f9fa;
font-weight: 600;
text-align: center;
padding: 12px 16px;
}
}否则编译后生成的 CSS 选择器层级太浅，th 会匹配到所有表格，包括 ant-table-thead th 或 el-table__header th。
如何用 Less 参数控制表头高度和文字大小？
硬编码 14px 或 40px 会让后续调整成本变高。应该抽成变量 + 默认参数：
.table-header(@height: 40px, @font-size: 14px) {
th {
height: @height;
line-height: @height;
font-size: @font-size;
}
}
.my-data-table {
.table-header(42px, 15px);
}注意：Less 函数（mixin）里不能用 !default 覆盖已声明变量，必须靠调用时传参覆盖；若多个表格共用但参数不同，就别写成全局变量，否则改一个全崩。
hover 和排序图标怎么用嵌套加伪元素精准定位？
表头 hover 背景和排序箭头（▲▼）常被写成独立 class，导致 HTML 多一堆 sort-up 标签。Less 可以在嵌套里直接操作 ::after：
.my-data-table th {
position: relative;
cursor: pointer;
&:hover {
background-color: #e9ecef;
}
&.sortable::after {
content: " ▼";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
color: #6c757d;
}
}关键点：必须加 position: relative 才能让 ::after 相对表头定位；transform: translateY(-50%) 比 top: 8px 更可靠，避免字体渲染差异导致上下偏移。
IE11 下 ::after 不显示排序图标怎么办？
IE11 对伪元素 + content 的支持有坑：如果 th 没设 display: table-cell（哪怕浏览器默认是），IE11 可能忽略 ::after。解决方案只有两个：
- 显式加
display: table-cell到th规则里 - 改用内联 SVG 或 base64 图片作为背景，避开
content
display: table-cell，比加 hack 更可持续。 
