Skip to content

raw HTML with tables breaks document layout #9073

@daslu

Description

@daslu

(edit: indented code in the example for clarity)

Bug description

A raw HTML block breaks the document layout. Content after the block is placed out of the main tag and is thus not indented properly.

This seems similar to #8582. But in that previous case, the bug discussion focused on section tags, while the current case appears to be a different situation.

The following example is a minimized version of a real-world use case (where I had to use HTML rather than Markdown for tables in order to place them inside a more complicated div).

Steps to reproduce

Render the following .qmd document:

ABCD
```{=html}
<table>
  <thead>
    <tr>
      <th>V1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
  </tbody>
</table>
<div>
  <table>
    <thead>
      <tr>
        <th>V2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2</td>
      </tr>
    </tbody>
  </table>
</div>
```
EFGH

Expected behavior

We expect to see the text ABCD, then two tables, then the text EFGH, all laid out normally as a document.

Actual behavior

In the resulting HTML, the last piece of text is actually outside of the main part and is thus not rendered correctly.

Here is the relevant part of the resulting HTML (removed some whitespace and reindented):

  <div id="quarto-content" class="page-columns page-rows-contents page-layout-article">
    <main class="content" id="quarto-document-content">
      <p>ABCD</p>
      <div>
        <table data-quarto-postprocess="true" class="table">
          <thead>
            <tr class="header">
              <th data-quarto-table-cell-role="th">V1</th>
            </tr>
          </thead>
          <tbody>
            <tr class="odd">
              <td>1</td>
            </tr>
          </tbody>
        </table>
        <div>
          <table data-quarto-postprocess="true" class="table">
            <thead>
              <tr class="header">
                <th data-quarto-table-cell-role="th">V2</th>
              </tr>
            </thead>
            <tbody>
              <tr class="odd">
                <td>2</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </main>
  </div>
  <p>EFGH</p>

Here is how it looks in the browser:
image

Your environment

  • Quarto version 1.4.551 from bash
  • Ubuntu 22.04 jammy

Quarto check output

$ quarto check

Quarto 1.4.551
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.551
      Path: /opt/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2024.01
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /home/daslu/.TinyTeX/bin/x86_64-linux
      Version: 2023

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.10.9 (Conda)
      Path: /workspace/anaconda3/bin/python
      Jupyter: 5.3.0
      Kernels: python3

[✓] Checking Jupyter engine render....OK

R scripting front-end version 4.1.2 (2021-11-01)
[✓] Checking R installation...........(None)

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingtablesIssues with Tables including the gt integration

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions