How do I make labelled tables span across multiple pages?

[the-solipsist]

Description

Summary: If there's a table label, then Quarto->Typst tries to cram the whole table into a single page. If there's no table label, then Quarto->Typst correctly spans the table across multiple pages.

I am trying to convert from QMD to Typst. I have a table that starts off:

::: {#tbl-frameworks}
```{=html}
#| tbl-colwidths: [20,10,70]

<table>
  <thead>
    <tr>
      <th>Law / Regulation</th>
      <th>Specific Articles / Sections</th>
      <th>Key Provisions and Stipulations</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Law No. 14 of 2008 on Public Information Disclosure (UU KIP)</td>
...

If I don't provide the label, then the table spans across multiple pages:

Also note, that setting table column width doesn't work for the HTML table, regardless of whether I set it in the caption:
: Key Legal Frameworks Regulating Access to Information and Data Governance in Indonesia {tbl-colwidths="[20,10,70]"}
or in the table label:
::: {#tbl-frameworks tbl-colwidths="[20,10,70]"}
or within the html code:
#| tbl-colwidths: [20,10,70]

[mcanouil]

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

Without code to play with, hard to help, but Typst has a concept of breakable blocks. It's an option that can be enabled/disabled.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code block (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[mcanouil]

I took some time to make an example, you probably have to adapt it.

In Typst, "figure" are not breakable by default, so you need to modify the rule they obey.
Below is an approach to specifically target one figure.

If you want to do this globally, set the show rule at the beginning of your document and drop the #[..].
You could even be specific and target only the figure that has a table inside:

#show figure.where(kind: "quarto-float-tbl"): set block(breakable: true)

---

---
title: "Demo Document"
format: typst
---

```{=typst}
#[
  #show figure: set block(breakable: true)
```

::: {#tbl-large}

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
| Cell 7   | Cell 8   | Cell 9   |
| Cell 10  | Cell 11  | Cell 12  |
| Cell 13  | Cell 14  | Cell 15  |
| Cell 16  | Cell 17  | Cell 18  |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
| Cell 7   | Cell 8   | Cell 9   |
| Cell 10  | Cell 11  | Cell 12  |
| Cell 13  | Cell 14  | Cell 15  |
| Cell 16  | Cell 17  | Cell 18  |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
| Cell 7   | Cell 8   | Cell 9   |
| Cell 10  | Cell 11  | Cell 12  |
| Cell 13  | Cell 14  | Cell 15  |
| Cell 16  | Cell 17  | Cell 18  |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
| Cell 7   | Cell 8   | Cell 9   |
| Cell 10  | Cell 11  | Cell 12  |
| Cell 13  | Cell 14  | Cell 15  |
| Cell 16  | Cell 17  | Cell 18  |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
| Cell 7   | Cell 8   | Cell 9   |
| Cell 10  | Cell 11  | Cell 12  |
| Cell 13  | Cell 14  | Cell 15  |
| Cell 16  | Cell 17  | Cell 18  |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
| Cell 7   | Cell 8   | Cell 9   |
| Cell 10  | Cell 11  | Cell 12  |
| Cell 13  | Cell 14  | Cell 15  |
| Cell 16  | Cell 17  | Cell 18  |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
| Cell 7   | Cell 8   | Cell 9   |
| Cell 10  | Cell 11  | Cell 12  |
| Cell 13  | Cell 14  | Cell 15  |
| Cell 16  | Cell 17  | Cell 18  |

Caption for a long table

:::

```{=typst}
]
```

[mcanouil]

A more advanced solution is to use a Lua filter that targets the FloatRefTarget node (https://quarto.org/docs/prerelease/1.4/lua_changes.html#the-floatreftarget-ast-node)

--- @module breakable-figures
--- @license MIT
--- @copyright 2026 Mickaël Canouil
--- @author Mickaël Canouil
--- @version 1.0.0
--- @description Makes figures breakable in Typst output when breakable="true" is set

function FloatRefTarget(float)
  if not quarto.doc.is_format("typst") then
    return nil
  end

  local breakable = float.attributes and float.attributes["breakable"]
  if breakable == "true" then
    float.attributes["breakable"] = nil

    local open_raw = pandoc.RawBlock("typst", "#[\n#show figure: set block(breakable: true)")
    local close_raw = pandoc.RawBlock("typst", "]")

    return {
      open_raw,
      quarto.FloatRefTarget({
        identifier = float.identifier,
        type = float.type,
        content = float.content,
        caption_long = float.caption_long,
        caption_short = float.caption_short,
        order = float.order,
        classes = float.classes,
        attributes = float.attributes,
        parent_id = float.parent_id
      }),
      close_raw
    }
  end

  return nil
end

---
title: "Demo Document"
format: typst
filters:
  - breakable-figures.lua
---

::: {#tbl-large breakable="true"}

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
| Cell 7   | Cell 8   | Cell 9   |
| Cell 10  | Cell 11  | Cell 12  |
| Cell 13  | Cell 14  | Cell 15  |
| Cell 16  | Cell 17  | Cell 18  |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
| Cell 7   | Cell 8   | Cell 9   |
| Cell 10  | Cell 11  | Cell 12  |
| Cell 13  | Cell 14  | Cell 15  |
| Cell 16  | Cell 17  | Cell 18  |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
| Cell 7   | Cell 8   | Cell 9   |
| Cell 10  | Cell 11  | Cell 12  |
| Cell 13  | Cell 14  | Cell 15  |
| Cell 16  | Cell 17  | Cell 18  |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
| Cell 7   | Cell 8   | Cell 9   |
| Cell 10  | Cell 11  | Cell 12  |
| Cell 13  | Cell 14  | Cell 15  |
| Cell 16  | Cell 17  | Cell 18  |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
| Cell 7   | Cell 8   | Cell 9   |
| Cell 10  | Cell 11  | Cell 12  |
| Cell 13  | Cell 14  | Cell 15  |
| Cell 16  | Cell 17  | Cell 18  |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
| Cell 7   | Cell 8   | Cell 9   |
| Cell 10  | Cell 11  | Cell 12  |
| Cell 13  | Cell 14  | Cell 15  |
| Cell 16  | Cell 17  | Cell 18  |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
| Cell 7   | Cell 8   | Cell 9   |
| Cell 10  | Cell 11  | Cell 12  |
| Cell 13  | Cell 14  | Cell 15  |
| Cell 16  | Cell 17  | Cell 18  |

Caption for a long table

:::

[the-solipsist]

Thank, @mcanouil. (I've also updated the images to include alt text.)

This worked:
#show figure.where(kind: "quarto-float-tbl"): set block(breakable: true)

Any idea on how to get {tbl-colwidths="[20,10,70]"} to work with HTML tables? Or should I open a new discussion for that, since it's distinct from non-breakable tables.

Here's a MWE:

---
format:
  typst:
    template-partials:
      - typst-template.typ
    keep-typ: true
---

::: {#tbl-uukip tbl-colwidths="[20,10,70]"}

```{=html}
#| tbl-colwidths: [20,10,70]
<table>
  <thead>
    <tr>
      <th>Article number</th>
      <th>Article</th>
      <th>What it entails</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Article 9</td>
      <td>Lorem ipsum dolor sit amet</td>
      <td>
        <ul>
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
          <li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
          <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</li>
          <li>Nisi ut aliquip ex ea commodo consequat.</li>
          <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</li>
          <li>Excepteur sint occaecat cupidatat non proident, sunt in culpa.</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

```
Simple title {tbl-colwidths="[20,10,70]"}
:::

#let article(
  cols: 1,
  toc_title: "Table of contents",
  toc_depth: 3,
  doc,
) = {  doc }

[mcanouil]

You can't do "I will deal with the table myself" (this is what using raw blocks means) and at the same time "but please still modify the layout of my raw table".

Also #| ... means nothing in raw blocks or code blocks. The comment + pipe is for code cell.
Simple title {tbl-colwidths="[20,10,70]"} is not valid, : Simple title {#tbl-id tbl-colwidths="[20,10,70]"} eventually is but not in the context of the use of a cross-reference div syntax.
These are explained in the documentation. Mixing everything is more likely to confuse yourself than help.

The HTML table processing feature is there to make the conversion as-is, so specify the layout as raw as well.

---
title: Demo
format: typst
keep-typ: true
---

::: {#tbl-uukip}

```{=html}
<table>
  <colgroup>
    <col style="width:80%">
    <col style="width:10%">
    <col style="width:10%">
  </colgroup>
  <thead>
    <tr>
      <th style="text-align:left">Header 1</th>
      <th style="text-align:center">Header 2</th>
      <th style="text-align:right">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td style="text-align:center">123</td>
      <td style="text-align:right">Right aligned text</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td style="text-align:center">456</td>
      <td style="text-align:right">More right aligned text</td>
    </tr>
    <tr>
      <td>Row 3</td>
      <td style="text-align:center">789</td>
      <td style="text-align:right">Even more right aligned text</td>
    </tr>
  </tbody>
</table>
```

Caption

:::

[the-solipsist]

Thanks again! The <colgroup> works.

While your reasoning makes sense, it's not always clear what's being overridden by custom HTML tables. For instance, the regular "table caption" still works when using a cross-reference to a table using div syntax.

And there are some HTML-level settings that don't carry through to the Typst table. For instance, <table style="text-align: left">, doesn't work. Instead, I needed to set show table: set align(left) in typst-template.typ. For some reason, all quarto-float-tbl are centre-aligned by default, while regular tables aren't.