英文:
Prevent HTML table to use full page width in Quarto
问题
我想在Quarto中使用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中使用整个页面的宽度？
英文:
I would like to use HTML tables in Quarto, but I would like to prevent it using the full page width. Here is a reproducible example:
---
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]"}
Output:
As we can see, table 1 is normal and you can see it takes the full page width. Table 2 has tbl-colwdiths options, but this doesn't make the table smaller in width and is also the full page width. So I was wondering if anyone knows how to prevent the HTML table to use the full page width in Quarto?
答案1
得分: 3
以下是翻译好的部分：
也许可以使用CSS网格系统：
---
title: "在Quarto中使用HTML表格"
format: html
---
| 水果 | 价格 |
|--------|--------|
| 苹果 | 2.05 |
| 梨 | 1.37 |
| 橙子 | 3.09 |
表格 1
::: {.grid}
::: {.g-col-7}
| 水果 | 价格 |
|--------|--------|
| 苹果 | 2.05 |
| 梨 | 1.37 |
| 橙子 | 3.09 |
表格 2
:::
:::
编辑：如果要居中，可以利用CSS网格中的默认十二列，例如：
::: {.grid}
::: {.g-col-2}
:::
:::
::: {.g-col-8}
| 水果 | 价格 |
|--------|--------|
| 苹果 | 2.05 |
| 梨 | 1.37 |
| 橙子 | 3.09 |
表格 2
:::
:::
::: {.g-col-2}
:::
:::
英文:
Maybe use the css grid system:
---
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
:::
:::
Edit: If you want to center, you could utilize the default of twelve columns in the css grid, e.g.
::: {.grid}
::: {.g-col-2}
:::
::: {.g-col-8}
| fruit | price |
|--------|--------|
| apple | 2.05 |
| pear | 1.37 |
| orange | 3.09 |
: Table 2
:::
::: {.g-col-2}
:::
:::
答案2
得分: 2
使用.columns div 来实现列布局的一个可能选项
---
title: "Quarto中的HTML表格"
format: html
engine: knitr
---
:::: {.columns}
::: {.column width="70%"}
| 水果 | 价格 |
|--------|--------|
| 苹果 | 2.05 |
| 梨 | 1.37 |
| 橙子 | 3.09 |
: 表格 1
:::
::::
```{css, echo=FALSE}
.center-table table {
width: 50%;
margin-left: auto;
margin-right: auto;
}
::: {.center-table}
| 水果 | 价格 |
|---|---|
| 苹果 | 2.05 |
| 梨 | 1.37 |
| 橙子 | 3.09 |
: 表格 2
:::
<hr>
[![输入图片描述][1]][1]
[1]: https://i.stack.imgur.com/yZBAU.png
```
<details>
<summary>英文:</summary>
One possible option to use `.columns` div to get column layout
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
:::
::::
.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
:::
<hr>
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/yZBAU.png
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论