表格单元格中::first-letter失效是因display:table-cell不触发块级格式化上下文；正确方案是在<td>内嵌<div class="dropcap">并对其设置float:left、line-height:0.75、font-size:2.8em。
表格单元格里用 ::first-letter 会失效
直接在 <td> 或 <th> 上写 td::first-letter 几乎总是没反应——不是你代码写错，而是表格单元格默认是 display: table-cell，它不生成标准的块级格式化上下文，::first-letter 无法触发。
常见错误现象：样式写了、浏览器开发者工具里能看到规则被加载，但首字既不放大也不浮动，文字照常排布。
- 别试图给
<td>加display: block：这会破坏表格布局，单元格不再对齐，列宽崩塌 - 也别用
display: inline-block：同样导致高度错乱、垂直居中失效 - 更不要靠
text-indent或负margin模拟——它只缩进，不放大，也不脱离文本流，根本不是下沉
真正可行的方案：用 <div> 包裹内容再设样式
把首字下沉当成「段落级排版」来处理，而不是「表格级特性」。在 <td> 内部嵌一个 <div>（或 <p>），让它承担语义和样式责任：
<td> <div class="dropcap">今天天气很好，适合写代码。</div> </td>
然后对这个 <div> 应用标准的首字下沉规则：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
div.dropcap必须是块级（默认就是），且首字符前不能有空格、换行或注释 - 必须同时设置
float: left+line-height: 0.75+font-size: 2.8em，三者缺一不可 - 为防浮动影响后续行，给
div.dropcap加overflow: hidden或在父<td>上设vertical-align: top
中文表格首字下沉要额外注意标点和字体
表格里常出现带引号、书名号或破折号的标题，比如 《前端手册》第3章——这时 ::first-letter 很可能选中的是《，而不是“前”，视觉上就错了。
- 手动清理 HTML：确保
<div class="dropcap">开头就是汉字或英文，删掉前置全角符号；必要时用 JS 预处理（但慎用，首屏渲染延迟） - 字体要显式声明：表格默认字体常是等宽或无衬线体，放大后发虚，建议加
font-family: "Noto Serif CJK SC", serif - 行高微调比正文更敏感：中文字符方正，
line-height: 0.75容易让第二行顶到下沉字底部，可试line-height: 0.82+margin-top: -0.05em
响应式表格里首字下沉容易溢出单元格
小屏下表格常横向滚动或转为堆叠布局，font-size: 2.8em 会撑爆 <td> 宽度，导致文字换行错乱甚至横向溢出。
- 改用响应式单位：
font-size: clamp(1.5rem, 4vw, 2.5rem)，限制最小/最大尺寸 - 加媒体查询兜底：
@media (max-width: 480px) { .dropcap::first-letter { font-size: 1.8em; margin-right: 0.1em; } } - 别依赖
white-space: nowrap强制单行——它会让整个单元格变宽，破坏表格自适应
真正麻烦的不是写那几行 CSS，而是每次改表格结构时，都要重新检查 <div> 是否还在正确位置、首字符是否仍为纯文本、字体是否随环境变化而失真。
