tables don't work when wrapped in a div

[RichMorin]

Earmark's tables don't work when wrapped in a div, e.g.:

<div style="width: 600">
| OS Variant   | Command                       |
| ------------ | ----------------------------- |
| Arch Linux   | `pacman -S alacritty`         |
| Debian       | `apt install alacritty`       |
| FreeBSD      | `pkg install alacritty`       |
</div>

The result is that the Markdown source code for the table is displayed in a raw format, e.g.:

| OS Variant | Command | | ---...--- | | Arch Linux | `pacman ...

Incidentally, this technique was suggested on Stack Overflow:

https://stackoverflow.com/questions/36121672/set-table-column-width-via-markdown

[RobertDober]

Actually this is a double of #228 but it is not clear if and when #228 will be implemented.

For your special use case however an IAL will do the job

iex(9)> y= """
...(9)> | OS Variant   | Command                       |
...(9)> | ------------ | ----------------------------- |
...(9)> | Arch Linux   | `pacman -S alacritty`         |
...(9)> | Debian       | `apt install alacritty`       |
...(9)> | FreeBSD      | `pkg install alacritty`       |
...(9)> {:style="width: 600;"}
...(9)> """
"| OS Variant   | Command                       |\n| ------------ | ----------------------------- |\n| Arch Linux   | `pacman -S alacritty`         |\n| Debian       | `apt install alacritty`       |\n| FreeBSD      | `pkg install alacritty`       |\n{:style=\"width: 600;\"}\n"
iex(10)> Earmark.as_html! y
"<table style=\"width: 600;\">\n<colgroup>\n<col>\n<col>\n</colgroup>\n<thead>\n<tr>\n<th style=\"text-align: left\">OS Variant</th><th style=\"text-align: left\">Command</th>\n</tr>\n</thead>\n<tr>\n<td style=\"text-align: left\">Arch Linux</td><td style=\"text-align: left\"><code class=\"inline\">pacman -S alacritty</code></td>\n</tr>\n<tr>\n<td style=\"text-align: left\">Debian</td><td style=\"text-align: left\"><code class=\"inline\">apt install alacritty</code></td>\n</tr>\n<tr>\n<td style=\"text-align: left\">FreeBSD</td><td style=\"text-align: left\"><code class=\"inline\">pkg install alacritty</code></td>\n</tr>\n</table>\n"
iex(11)> Earmark.as_html!(y) |> IO.puts
<table style="width: 600;">
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th style="text-align: left">OS Variant</th><th style="text-align: left">Command</th>
</tr>
</thead>
<tr>
<td style="text-align: left">Arch Linux</td><td style="text-align: left"><code class="inline">pacman -S alacritty</code></td>
</tr>
<tr>
<td style="text-align: left">Debian</td><td style="text-align: left"><code class="inline">apt install alacritty</code></td>
</tr>
<tr>
<td style="text-align: left">FreeBSD</td><td style="text-align: left"><code class="inline">pkg install alacritty</code></td>
</tr>
</table>

[RobertDober]

oh sorry you cannot put a <div style=".... around the table so I am not sure that adding the style to the table is good enough.

Please participate in the discussion on #228 to underline your use cases.

I will leave this issue open for some time if you have any questions or suggestions.

[RichMorin]

I was interested to learn about the IAL syntax; that's new to me. However, although it does add a style attribute to the table tag, it doesn't resolve my use case. Apparently, there is some interaction with tablesorter, CSS, etc. Specifically, although I was able to change the text color using the IAL, trying to change the width had no effect as long as tablesorter was active.

Here is some relevant code from the layout templates:

<script>
  $(function(){
    $('table').tablesorter({
     headerTitle_useAria   : true,
     headerTitle_tooltip   : 'tooltip',
     sortReset             : true,
     sortRestart           : true,
      widgets               : ['zebra', 'headerTitles']
    });
  });
</script>

And here is some from my CSS:

table.types {
  border-spacing:   20px 0px;
  border-collapse:  separate;
  layout:           fixed;
}

/* Tablesorter Overrides #K - !important is a code smell... */

table.tablesorter-default td,
table.tablesorter-default th {
  font-size:              1.3em !important;
}

[cw789]

As long as #228 is unresolved & you're able to edit the given markdown,
surrounding your table additionally with a HTML <pre> tag would make your table at least readable.

<div style="width: 600">
<pre>
| OS Variant   | Command                       |
| ------------ | ----------------------------- |
| Arch Linux   | `pacman -S alacritty`         |
| Debian       | `apt install alacritty`       |
| FreeBSD      | `pkg install alacritty`       |
</pre>
</div>

Or alternativ with an additional style.

<div style="width: 600; white-space: pre-line;">
| OS Variant   | Command                       |
| ------------ | ----------------------------- |
| Arch Linux   | `pacman -S alacritty`         |
| Debian       | `apt install alacritty`       |
| FreeBSD      | `pkg install alacritty`       |
</div>

This both workarounds are only working as long as your table is aligned with white spaces.

[RobertDober]

@RichMorin sorry replied in the wrong issue LOL

In case you did not see my reply here it goes again:

Indeed, quite thoughtful of you.

Yeah I was afraid that the IAL would not cut it.

I believe that #228 is a really worthy goal, but it is a little bit complicated.
I will have some time during my vacations end of April hopefully but I'd prefer to work on exposing the AST #145, so I'll check with @cw789 if he is making progress on #228 or if I shall take it over?