Prevent HTML table to use full page width in 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?

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

:::
::::


```{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

:::