Markdown tables don't get reveal class; can't assign with .element comment.

[metasim]

Synopsys

Seem to be stuck in a Catch-22 trying to get markdown tables to get the reveal.js theme styles applied to them.

Details

A simple markdown table appears to be parsed and rendered correctly, but doesn't have the reveal class assigned to it. This fragment:

              ...
              <section data-markdown>
                <script type="text/template">
## Tables

| Tables        | Are           | Cool  | 
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 | 

                </script>
              </section>
              ...

renders like this:

But (using the default theme and regular HTML), the result should be like this:

Here's the generated marked-generated HTML looks like in the Chrome element inspector:

<table>
<thead>
<tr>
<th>Tables</th>
<th align="center">Are</th>
<th align="right">Cool</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 3 is</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>col 2 is</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>zebra stripes</td>
<td align="center">are neat</td>
<td align="right">$1</td>
</tr>
</tbody>
</table>

---

Attempting to use the element attribute syntax doesn't appear to work either:

## Tables

<!-- .element: class="reveal" -->
| Tables        | Are           | Cool  | 
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 | 

gives you this:

Putting it at the end of the header allows the Markdown to be parsed correctly, but the style class gets assigned to the header row instead:

## Tables

| Tables        | Are           | Cool  | <!-- .element: class="reveal" -->
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 | 

comes out like this:

[metasim]

PS: Attempting to put a div around the table also results in a markdown parser fail:

              <section data-markdown>
                <script type="text/template">
## Tables

<div class="reveal">

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 | 

</div>

                </script>
              </section>

gives:

[hakimel]

Hey, tables shouldn't have a .reveal class attached to them. The "reveal" class name is reserved exclusively for the main container of the whole presentation. The default table styles have been updated quite a lot in the dev branch recently and when I try out the markdown you posted it seems to render correctly there:

The most recent table styles are pasted below. You can either inject those into your reveal.css or start using the dev branch.

.reveal table {
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

.reveal table th {
  font-weight: bold;
}

.reveal table th,
.reveal table td {
  text-align: left;
  padding: 0.2em 0.5em 0.2em 0.5em;
  border-bottom: 1px solid;
}

[metasim]

Fantastic! Thanks for pulling out latest CSS from the dev branch for me. Saves me having to dig! I should have mentioned that I was working against the 2.6.2 tag at the time.

[rotnicki]

And what about the markdown alignment colons?

| ------------- |:-------------:| -----:|

They seem to be ignored which results in columns not being aligned (left, right, center).

[SethosII]

I also stumbled over this. The alignment was fixed by @fehmer in #1149. This is included in version 3.1.0

[swill]

Is there a solution to placing a <!-- .element: class="some-class" --> tag with just a markdown table and being able to make it apply to the <table> element?

[mschilli87]

@swill: Please don't cross-post without linking. 😉

[databill]

I also want to know how to set the .element in the external markdown file.