CODEWITHSUNDEEP
html-tablewidthpandoc
Joshua Muheim
Joshua Muheim

Reputation: 13195

Pandoc creates me a table of width 33%, why?

The markdown:

| Symbol | Beschreibung |
|--------|--------------|
| ![Erfolgskriterium erfüllt](/assets/reports/audit/signal_ok.jpg) | Wenn ein Erfolgskriterium erfüllt ist, so wurden bei den Tests alle gefundenen Fälle richtig umgesetzt gefunden. Keine weiteren Massnahmen sind nötig. |
| ![Erfolgskriterium nicht erfüllt](/assets/reports/audit/signal_not_ok.jpg) | Wenn ein Erfolgskriterium nicht erfüllt ist, so wurden bei den Tests Fälle gefunden, die das Kriterium nicht in der verlangten Art und Weise erfüllen. Beispiele für Probleme werden aufgeführt. Nötige Massnahmen werden aufgeführt oder es wird zu weiterführenden Quellen verwiesen. |

Result:

<table style="width:33%;">
  <caption>Bewertungen und Symbole</caption>
  <colgroup>
    <col width="12%">
    <col width="20%">
  </colgroup>
<thead>
...

I'd like to have a table with auto width by default. How can this be achieved?

Upvotes: 2

Views: 3849

Answers (4)

mbehrendt
mbehrendt

Reputation: 1

Just apply some more CSS to overwrite current CSS.

pandoc "--variable=include-before:<style>body > table > colgroup > col { width: unset!important }</style>"

This will insert one more line directly after html body-tag inside the output document, which selects all body > table > colgroup > col elements and overwrite their width setting.

Upvotes: 0

Ganku Caelestis
Ganku Caelestis

Reputation: 47

You might hate me. But why not removing the <colgroup> using javascript?

Its not really the clean way but before you force yourself to change the table style, this might have other side effects that you dont want, using this easy solution will also work.

And it wont *ck up your markdown with heavy table syntax.

Upvotes: 0

marc-medley
marc-medley

Reputation: 9832

I'd like to have a table with auto width by default. How can this be achieved?

Increase the widths of the separator lines between the header row and content rows.

Pandoc Manual: pipe_tables section only briefly mentions how the table separator lines affect relative column widths.

If a pipe table contains a row whose printable content is wider than the column width (see --columns), then the cell contents will wrap, with the relative cell widths determined by the widths of the separator lines.

Experimentally, one can find that the widths of the separator lines also affects the overall table width.

In my case (pandoc 1.19.1), the following markdown has the overall separator line widths increased from the question example above …

| Symbol | Beschreibung |
|----------------------|------------------------------------------------------------------|
| ![Erfolgskriterium erfüllt](/assets/reports/audit/signal_ok.jpg) | Wenn ein Erfolgskriterium erfüllt ist, so wurden bei den Tests alle gefundenen Fälle richtig umgesetzt gefunden. Keine weiteren Massnahmen sind nötig. |
| ![Erfolgskriterium nicht erfüllt](/assets/reports/audit/signal_not_ok.jpg) | Wenn ein Erfolgskriterium nicht erfüllt ist, so wurden bei den Tests Fälle gefunden, die das Kriterium nicht in der verlangten Art und Weise erfüllen. Beispiele für Probleme werden aufgeführt. Nötige Massnahmen werden aufgeführt oder es wird zu weiterführenden Quellen verwiesen. |

… generates the following html table…

<table>
  <colgroup>
    <col style="width: 25%" />
    <col style="width: 74%" />
  </colgroup>
<thead>
<tr class="header">
  <th>Symbol</th>
  <th>Beschreibung</th>
</tr>

… which has no width contraint on the table itself.

The resulting table, in this case, spans the window. And, the column content reflows nicely as the window width changes.

Upvotes: 2

mb21
mb21

Reputation: 39189

From the Pandoc README on pipe tables:

If a pipe table contains a row whose printable content is wider than the column width (see --columns), then the cell contents will wrap, with the relative cell widths determined by the widths of the separator lines.

The idea of markdown is to make it look nice in the source as well, for example with multiline tables you can control the column widths as well:

---------------------------------------------------------------
Symbol                   Beschreibung
------                   ---------------
![Erfolgskriterium       Wenn ein Erfolgskriterium erfüllt
erfüllt][ok]             ist, so wurden bei den Tests alle
                         gefundenen Fälle richtig umgesetzt
                         efunden. Keine weiteren Massnahmen
                         sind nötig.

![Erfolgskriterium       Wenn ein Erfolgskriterium nicht
nicht erfüllt][not_ok]   erfüllt ist, so wurden bei den Tests
                         Fälle gefunden, die das Kriterium
                         nicht in der verlangten Art und Weise
                         erfüllen. Beispiele für Probleme
                         werden aufgeführt. Nötige Massnahmen
                         werden aufgeführt oder es wird zu
                         weiterführenden Quellen verwiesen.
---------------------------------------------------------------

[ok]:     /assets/reports/audit/signal_ok.jpg
[not_ok]: /assets/reports/audit/signal_not_ok.jpg

If you really, really don't want column widths, you'd have to use simple tables, but they don't allow multiline text. Or write a pandoc filter to remove the widths.

Upvotes: 2

Related Questions