如何阻止Quarto中的HTML表格占满页面宽度？

Quarto默认的HTML表格样式是width: 100%，所以即使设置tbl-colwidths调整列宽比例，表格整体仍会占满页面宽度。要让表格收缩到合适宽度，可以通过以下几种方法实现：

方法一：自定义CSS类（全局复用） #

在文档开头添加自定义CSS样式，定义窄表格的样式，之后可以给任意表格指定该类：

<style>
.table-narrow {
  width: auto; /* 让表格宽度适配内容 */
  margin-left: auto;
  margin-right: auto; /* 可选，让表格居中显示 */
  border-collapse: collapse; /* 可选，保持表格边框样式一致 */
}
</style>

然后在表格的属性中指定该类：

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: 适配内容宽度的表格 {tbl-class="table-narrow"}

方法二：Inline样式（单个表格定制） #

直接给表格添加style属性，指定具体宽度或自适应：

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: 宽度为页面50%的表格 {style="width: 50%; margin: 0 auto;"}

方法三：结合列宽比例与整体宽度 #

如果需要同时控制列宽比例和表格整体宽度，可以将tbl-colwidths和style属性结合使用：

| fruit  | price  |
|--------|--------|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: 列宽7:3、整体占页面60%的表格 {tbl-colwidths="[70,30]" style="width: 60%;"}

关键原理 #

Quarto生成的HTML表格默认继承了width: 100%的样式，上述方法通过CSS覆盖了这个默认规则，让表格根据内容或指定宽度收缩，不再占满整个页面。

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