HTML表格如何制作带排序图标的表头（技巧分享）-html教程-PHP中文网

用 css ::after 伪元素插入 unicode 箭头（▲/▼）最轻量可靠，不改 html、不依赖 js，兼容 ie8 且无障碍友好；直接写入字符会破坏语义、导致图标丢失及 aria-sort 脱节。

html表格如何制作带排序图标的表头（技巧分享）

直接用 CSS ::after 伪元素插入 Unicode 箭头（▲/▼）是最轻量、最可靠的做法，不用改 HTML 结构，也不依赖 JS 插入文本，可访问性好，IE8 都能跑。

为什么不能直接往 `th` 里写 ▲ 或 ▼ 字符

硬塞进 textContent 或用 innerHTML 覆盖内容，会破坏原有表头文字的语义和屏幕阅读器播报；而且一旦 JS 重绘或 DOM 更新，图标容易丢失或错位。更关键的是：这类操作会让 aria-sort 属性与视觉状态脱节，无障碍体验直接打折。

别写成 ▲ 或 ↑ —— 这些是 HTML 实体，在某些环境里渲染不稳定
别用 ↑ / ↓ 这类旧符号 —— 字形窄、基线高，和文字对不齐
Unicode 箭头必须是 ▲（U+25B2）和 ▼（U+25BC），复制粘贴即可，不要转义

`::after` 伪元素怎么写才不踩坑

伪元素看着简单，但几个细节没设对，图标就歪、挤、看不见：

必须设 display: inline-block，否则 width/height/vertical-align 全无效
content: '▲' 前后加空格（如 content: ' ▲'），不然紧贴文字难分辨
一定要配 vertical-align: middle，否则图标挂在文字下半截，像掉了一样
隐藏未排序状态的图标，用 visibility: hidden，别用 display: none —— 后者会破坏行内流布局，导致表头宽度跳变

示例 CSS：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

th.sortable::after {
  content: '▽';
  color: #999;
  font-size: 0.8em;
  display: inline-block;
  vertical-align: middle;
  visibility: visible;
}
th.sorted-asc::after {
  content: ' ▲';
  color: #007bff;
}
th.sorted-desc::after {
  content: ' ▼';
  color: #007bff;
}