doc/bugs/style.css___40__unnecessarily__41___breaks_pandoc_table_headers.mdwn

   1 This may, strictly speaking, be a bug in the [[plugins/contrib/pandoc]] plugin, but I think it would be better to fix it in ikiwiki because of its kind (and maybe because I believe/hope pandoc will become the markdown dialect standard). For all I know it might not only affect pandoc tables.
   2
   3 When creating a simple table in pandoc-flavoured markdown,
   4
   5     1    2
   6     ---  ---
   7     3    4
   8
   9 pandoc converts this to the html code
  10
  11         <table>
  12         <thead>
  13         <tr class="header">
  14         <th align="left">1</th>
  15         <th align="left">2</th>
  16         </tr>
  17         </thead>
  18         <tbody>
  19         <tr class="odd">
  20         <td align="left">3</td>
  21         <td align="left">4</td>
  22         </tr>
  23         </tbody>
  24         </table>
  25
  26 `<tr class="header">` causes it to be affected by `style.css`'s
  27
  28         .header {
  29                 margin: 0;
  30                 font-size: 140%;
  31                 font-weight: bold;
  32                 line-height: 1em;
  33                 display: block;
  34         }
  35
  36 (more specifically by `display: block;`), which results in all header cells to cramp together in the first column.
  37
  38 The fix is easy: In `style.css` change `.header {` to `.header tr:not(.header) {`.
  39
  40 Alternatively, add the following code.
  41
  42         tr.header {
  43                 display: table-row;
  44                 }
  45
  46 I've added that last code snippet to my `custom.css` file. I admit `.header tr:not(.header)` is not especially elegant, but then again, I have almost no knowledge of CSS. There might be better solutions. (I don't even know why `display: block;` breaks the tables or why changing it to `display: table-header;` doesn't fix it but `display: table-row;` does :D )
  47
  48 > This is essentially a conflict between ikiwiki's expectations for the
  49 > definitions of CSS classes, and pandoc's expectations. The ikiwiki
  50 > templates use `class="header"` to mean essentially the same thing
  51 > as a HTML5 `<header>`, while Pandoc assumes a different meaning.
  52 >
  53 > I think `div.header, header.header {` is probably a cleaner fix,
  54 > and I have [[done]] that.
  55 >
  56 > FYI, `display: block` breaks the tables because it makes the `<tr>` not
  57 > be treated as a table row by the browser's layout engine.
  58 > `table-header` is not a valid
  59 > [value for the CSS `display` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
  60 > so that won't work.
  61 >
  62 > --[[smcv]]