如何在Kramdown中调整表格单元格内的图片尺寸？

一、表格内图片尺寸调整失败的修复 #

你当前写法的问题在于kramdown的内联属性列表（IAL）不需要对引号做HTML转义，同时建议增加尺寸单位避免解析异常，修正后的写法如下：

| : 1st Column : | : 2nd Column : | : 3rd Column : |
| Sec A : | Para | ![Supported](/assets/images/check.png){: width="10px" height="auto"}|
| Sec B : | Para | X |

如果上述写法仍不生效，可以通过全局CSS统一控制表格内图片尺寸，给表格添加自定义类后指定第三列图片的大小即可，不需要单独给每个图片加属性：

{:.support-table}
| : 1st Column : | : 2nd Column : | : 3rd Column : |
| Sec A : | Para | ![Supported](/assets/images/check.png)|
| Sec B : | Para | X |

在站点CSS文件中添加对应样式：

.support-table td:nth-child(3) img {
  width: 10px;
  height: auto;
}

二、更优的对勾/叉号插入方案 #

不建议用本地图片插入这种标识，优先选择无外部资源依赖的Unicode字符方案，渲染速度更快、适配性更强，写法也更简单：

• 对勾可以用✓（对应HTML实体✓）或✅（对应HTML实体✅）
• 叉号可以用✗（对应HTML实体✗）或❌（对应HTML实体❌）
  直接把字符写到表格单元格即可，大小会自动和当前行文字对齐，如果需要调整样式可以加内联属性：

| : 1st Column : | : 2nd Column : | : 3rd Column : |
| Sec A : | Para | {: style="color:green"} ✓ |
| Sec B : | Para | {: style="color:red"} ✗ |

如果需要统一的自定义图标样式，也可以通过CSS类定义图标，不用每次插入图片：

1. 在站点CSS中提前定义图标类：

.icon-check {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url(/assets/images/check.png) center/cover no-repeat;
}
.icon-cross {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url(/assets/images/cross.png) center/cover no-repeat;
}

2. 表格内直接调用类即可：

| : 1st Column : | : 2nd Column : | : 3rd Column : |
| Sec A : | Para | <span class="icon-check"></span> |
| Sec B : | Para | <span class="icon-cross"></span> |

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