Markdown tables isn't formatted in newer Quarto versions

[cderv]

Discussed in #10902

^{Originally posted by snhansen September 27, 2024}

Description

I just noticed that markdown tables suddenly doesn't have any formatting done. Is this intentional? The reason I'm asking is because it's how (most of the) tables are presented in the documentation, see e.g. https://quarto.org/docs/authoring/tables.html#markdown-tables

This example from the documentation

| Col1 | Col2 | Col3 |
|------|------|------|
| A    | B    | C    |
| E    | F    | G    |
| A    | G    | G    |

: My Caption {#tbl-letters}

See @tbl-letters.

renders like this for me:

[cderv]

This is with latest quarto pre-release. And how website also show the problem as the linked shared.

possibly related to Pandoc's change in pandoc 3.2.1

Don’t emit unnecessary classes in HTML tables (#9325, Thomas Soeiro). Pandoc used to emit a header class on the tr element that forms the table header. This is no longer needed, because head > tr will do the same thing. Similarly, pandoc used to emit even and odd classes on trs, allowing striped styling. This is no longer needed, because one can use e.g. tbody tr:nth-child(2n). Compatibility warning: users who relied on these classes to style tables may need to adjust their CSS.

We updated in

• Chore: Update to Pandoc 3.4 #10840

[cderv]

Oh in fact this is definitely something we needed to check when we would update Pandoc (
cc @cscheid)

• [pandoc 3.2.1] Check for change on table as odd / even / header classes have been removed #10607

[cderv]

Ok so here is the situation. @cscheid Happy to discuss this live when you're available.

• Quarto was identifying Pandoc's generated table by catching this .odd class that have been removed (see [pandoc 3.2.1] Check for change on table as odd / even / header classes have been removed #10607 for context)
  

  quarto-cli/src/format/html/format-html-bootstrap.ts

  Lines 452 to 471 in 2d0331c

  	// add .table class to pandoc tables
  	const tableHeaders = doc.querySelectorAll("tbody > tr:first-child.odd");
  	for (let i = 0; i < tableHeaders.length; i++) {
  	const th = tableHeaders[i];
  	if (th.parentNode?.parentNode) {
  	const table = th.parentNode.parentNode as Element;
  	table.removeAttribute("style");
  	// see https://github.com/quarto-dev/quarto-cli/issues/6945
  	// for a why we want to check for 'plain' here
  	addTableClasses(
  	table,
  	!!findParent(
  	table,
  	(el) =>
  	el.classList.contains("cell") && !el.classList.contains("plain"),
  	),
  	);
  	}
  	}

• This allowed us to target those tables, and apply some default style, while leaving alone other tables not produced by Pandoc writer.

• This .table class is also a quarto addition for other type of table we want to style similarly

  • Pandas
    

    quarto-cli/src/format/html/format-html-bootstrap.ts

    Lines 473 to 489 in 2d0331c

    	// add .table class to pandas tables
    	const pandasTables = doc.querySelectorAll("table.dataframe");
    	for (let i = 0; i < pandasTables.length; i++) {
    	const table = pandasTables[i] as Element;
    	table.removeAttribute("border");
    	addTableClasses(table, true);
    	const headerRows = table.querySelectorAll("tr");
    	for (let r = 0; r < headerRows.length; r++) {
    	(headerRows[r] as Element).removeAttribute("style");
    	}
    	if (
    	table.previousElementSibling &&
    	table.previousElementSibling.tagName === "STYLE"
    	) {
    	table.previousElementSibling.remove();
    	}
    	}

  • DataFrame.jl
    

    quarto-cli/src/format/html/format-html-bootstrap.ts

    Lines 491 to 496 in 2d0331c

    	// add .table class to DataFrames.jl tables
    	const dataFramesTables = doc.querySelectorAll("table.data-frame");
    	for (let i = 0; i < dataFramesTables.length; i++) {
    	const table = dataFramesTables[i] as Element;
    	addTableClasses(table, true);
    	}

• This is all part of having computation table by styled by default a certain way
  

  quarto-cli/src/format/html/format-html-bootstrap.ts

  Lines 443 to 451 in 2d0331c

  	// default treatment for computational tables
  	const addTableClasses = (table: Element, computational = false) => {
  	table.classList.add("table");
  	if (computational) {
  	table.classList.add("table-sm");
  	table.classList.add("table-striped");
  	table.classList.add("small");
  	}
  	};

  which is was a discussion item that we solved by allowing to opt-out default styling form this .table class

  • Markdown tables use different style than code (kable) tables #922
  • Option to disable table striping in computational tables? #6945

@cscheid based on this, I don't think we can remove the .table class from our stylesheet without more changes. It is required for "default treatment for computational tables" in a way.

Or at least we need more adaptation.

With new Pandoc behavior for table, there is now no more ways to know this is a table produced by Pandoc and not a raw html table passed through. In Quarto we have a third type which is raw HTML table being parsed by Quarto and written back by pandoc (with data-quarto-postprocess="true" as attributes).

If we don't want to break our default behavior, I do think we still need a way to add the .table class to table produced by Pandoc.

As shared in #10607, what was done on R Markdown side is to add back the odd and even class on Table process by Pandoc (using Lua Filter) as this was the way to not change any other styling in all the package that would rely on this .odd .even class.

So we could do the same, at least for HTML table written with Table ast node, without quarto-postprocess as attribute.

[cderv]

As shared in #10607, what was done on R Markdown side is to add back the odd and even class on Table process by Pandoc (using Lua Filter) as this was the way to not change any other styling in all the package that would rely on this .odd .even class.

I have opened a PR for discussion using this idea of Lua filter to revert back Pandoc removal

• Handle Pandoc change in table classes #10906