防止 HTML 表格在四开中使用整个页面宽度

Question

我想在四开中使用 HTML 表格，但我想阻止它使用整个页面宽度。这是一个可重现的示例：

---
title: "HTML tables in Quarto"
format: html
---

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

: Table 1

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

: Table 2 {tbl-colwidths="[75,25]"}

输出：

我们可以看到，表1是正常的，你可以看到它占据了整个页面的宽度。表 2 有

tbl-colwdiths

选项，但这并不会使表格的宽度变小，而且还是整个页面的宽度。所以我想知道是否有人知道如何防止 HTML 表格在

Quarto

中使用整个页面宽度？

Answer 1

也许使用 css 网格系统:

---
title: "HTML tables in Quarto"
format: html
---

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

: Table 1

::: {.grid}

::: {.g-col-7}

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

: Table 2 

:::
:::

编辑：如果你想居中，你可以利用 css 网格中默认的十二列，例如

::: {.grid}

::: {.g-col-2}
:::


::: {.g-col-8}

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

: Table 2 

:::

::: {.g-col-2}
:::

:::

Answer 2

使用

.columns

div 获取列布局的一个可能选项

---
title: "HTML tables in Quarto"
format: html
engine: knitr
---


:::: {.columns}
::: {.column width="70%"}

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

: Table 1

:::
::::


```{css, echo=FALSE}
.center-table table {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
```

::: {.center-table}

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

: Table 2

:::

---

Answer 3

如果您的表格来自计算，您可以通过将 Shafee 的 CSS 片段包含在四开块选项中来应用更优雅的形式。 与使用列相比，这可以节省几行代码，并且可以更轻松地应用于许多表，尽管它缺乏专门定义列宽度所允许的灵活性。

这是结合了 Shafee 在另一个问题上的回答 以及关于 表格样式的四开本指南。

样式.css

.center-table table {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

doc.qmd

---
title: "HTML tables in Quarto"
format:
  html:
    css: styles.css
---
    
```{r}
#| tbl-cap: Fruit Prices
#| label: tbl-mytable
#| echo: false
#| classes: .center-table

tibble::tribble(
    ~fruit, ~price,
    "apple", 2.05,
    "pear", 1.37,
    "orange", 3.09
) |> 
    knitr::kable()
```