如何解决reveal.js框架中表格内部元素错位问题？

方法1：全局重置表格单元格默认样式 #

reveal.js默认会给表格单元格（<td>/<th>）添加特殊样式（比如display: flex），干扰了<div>这类块级元素的原生布局。可以通过自定义CSS恢复原生表格单元格的行为：

.reveal table td,
.reveal table th {
  display: table-cell; /* 还原原生表格单元格的显示属性 */
  vertical-align: middle; /* 按需调整垂直对齐方式，可选 */
  text-align: left; /* 按需调整水平对齐方式，可选 */
}

将这段代码添加到演示文稿的自定义样式区域（比如<head>内的<style>标签，或单独的CSS文件中）。

方法2：给目标表格添加专属类调整 #

如果不想全局修改所有表格样式，可给需要正常显示的表格加一个自定义类（比如native-layout-table），再针对性设置样式：

<table class="native-layout-table">
  <tr>
    <td><div>示例内容1</div></td>
    <td><div>示例内容2</div></td>
  </tr>
</table>

对应的CSS：

.reveal table.native-layout-table td,
.reveal table.native-layout-table th {
  display: table-cell;
  /* 可添加其他需要的样式，比如 padding、颜色等 */
}

方法3：调整内部

的样式适配 #

若不想修改表格单元格样式，也可以直接调整<div>的属性，让它适配reveal.js的默认表格布局：

.reveal table td div,
.reveal table th div {
  display: inline-block;
  width: 100%; /* 让<div>占满单元格宽度 */
  margin: 0; /* 清除默认外边距避免错位 */
}

验证与微调 #

修改后刷新演示文稿，表格内的<div>元素即可和纯HTML环境下保持一致布局。如果仍有局部错位，检查是否存在嵌套元素的样式冲突，针对性调整属性即可。

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