如何调整Quarto演示中HTML表格的显示尺寸

有几种实用方法可以在保持表格元素间距比例不变的前提下，调整表格的显示尺寸：

方法1：内联缩放样式（快速生效） #

直接给目标表格套一个容器，用CSS缩放控制整体大小，能完整保留表格原有布局比例：

---
title: "Change size of HTML table in Quarto"
format: revealjs
---

## Example slide

<style>
.table-scaled {
  transform: scale(0.8); /* 按比例缩小，0.8即原尺寸的80% */
  transform-origin: top left; /* 设定缩放原点，避免表格位置偏移 */
}
</style>

<div class="table-scaled">
| Default | Left | Right | Center |
|---------|------|-------|--------|
| 12      | 12   |    12 |   12   |
| 123     | 123  |   123 |  123   |
| 1       | 1    |     1 |   1    |
</div>

方法2：全局统一配置 #

如果需要所有幻灯片的表格都用相同尺寸，可在文档头部添加全局CSS样式：

---
title: "Change size of HTML table in Quarto"
format: revealjs
---

<style>
.reveal table {
  transform: scale(0.75);
  transform-origin: center top; /* 让表格居中缩放 */
}
</style>

## Example slide

| Default | Left | Right | Center |
|---------|------|-------|--------|
| 12      | 12   |    12 |   12   |
| 123     | 123  |   123 |  123   |
| 1       | 1    |     1 |   1    |

方法3：自定义宽度与字体大小 #

若不想用缩放，可直接控制表格宽度和字体大小，同时固定单元格内边距来维持间距：

---
title: "Change size of HTML table in Quarto"
format: revealjs
---

## Example slide

<style>
.custom-table {
  width: 80%; /* 设为幻灯片宽度的80% */
  font-size: 0.8em; /* 字体缩小为原尺寸的80% */
  margin: 0 auto; /* 表格居中显示 */
}
.custom-table th, .custom-table td {
  padding: 0.5em 1em; /* 固定单元格内边距，保证间距不变 */
}
</style>

| Default | Left | Right | Center |
|---------|------|-------|--------|
| 12      | 12   |    12 |   12   |
| 123     | 123  |   123 |  123   |
| 1       | 1    |     1 |   1    |
{.custom-table}

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