mPDF 8.0.x表格单元格内span元素padding和border-radius不生效问题

问题根源 #

mPDF 8.x的PDF渲染引擎对表格内inline-block元素的padding、border-radius样式支持存在局限——当表格使用默认的border-collapse: collapse布局时，单元格的布局规则会压制内部元素的这类样式，仅背景色、文字颜色能正常生效，这也是网页中显示正常但PDF里失效的原因。

可行解决方案 #

1. 调整表格布局规则 #

给目标表格添加border-collapse: separate，同时重置单元格默认padding避免样式冲突：

table {
  border-collapse: separate;
  border-spacing: 0; /* 可选，消除单元格间默认间距 */
}
td {
  padding: 0; /* 重置单元格padding，避免与span的padding叠加 */
}

2. 优化span的样式定义 #

保留inline-block保证与起始文本同行，补充box-sizing确保padding计算正确，同时拆分border-radius写法提升mPDF识别率：

.mySpan {
  background-color: #fdb826; 
  color: white;
  /* 拆分圆角写法，兼容mPDF渲染 */
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  padding: 2px 3px 2px 2px; /* 上、右、下、左的padding合并写法 */
  display: inline-block;
  line-height: 1.2; /* 调整行高，避免padding导致文字偏移 */
  box-sizing: border-box; /* 确保padding包含在元素宽度内 */
}

3. 确保HTML结构简洁 #

span需直接嵌套在单元格内，不要被其他块级元素包裹，保证与起始文本在同一行：

<td>
  起始文本
  <span class="mySpan">My text that should have paddings around</span>
</td>

备选方案（若上述方法无效） #

尝试改用inline-flex布局（mPDF 8.x已支持基础flex特性），确保元素垂直对齐：

.mySpan {
  display: inline-flex;
  align-items: center;
  /* 其他样式同上 */
}

内容的提问来源于stack exchange，提问作者Joan