Tables inside a Notes sidebar are not rendered correctly

support
1

We are trying to add a table inside a note sidebar.
This is the markdown code

{{< note >}}
Notes catch the reader's attention without a sense of urgency.

You can have multiple paragraphs and block-level elements inside an admonition.

| Heading cell 1 | Heading cell 2 |
|----------------|----------------|
| Body cell 1    | Body cell 2    |

{{< /note >}}

| Heading cell 1 | Heading cell 2 |
|----------------|----------------|
| Body cell 1    | Body cell 2    |

The rendered output is shown in the screenshot below.
The table inside the note sidebar is not rendered correctly, whereas the same table outside the note block is rendered correctly.

Does Hugo support rendering tables inside note sidebars?

If yes, a working example would really help.

image
image1062Ă—325 44 KB

2

A bit more context (or a link to the repository) might provide you with more accurate and speedier feedback. In any case, I suggest you take a look at the rendered HTML in your browser’s developer console to see if the difference is only a matter of styling or if the table element is really missing from the note div.

3

Thanks for the reply.

The issue is a matter of styling.

The support needed is for the Kubernetes official documentation, for this issue

Repository (forked): website/content/en/docs/test.md at issue-37500 · adityasamant25/website · GitHub
Line: 368

In the html seen in the browser’s developer console, the table appears fine both inside and outside the note sidebar.
Also in the .md preview, the tables are seen correctly.

However, when it is finally rendered on the browser, the table inside the note sidebar is distorted.

HTML output from the browser’s developer console

<div class="alert alert-info note callout" role="alert">
  <strong>Note:</strong> <p>Notes catch the reader's attention without a sense of urgency.</p>
  <p>You can have multiple paragraphs and block-level elements inside an admonition.</p>
  <table>
    <thead>
      <tr>
        <th>Heading cell 1</th>
        <th>Heading cell 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Body cell 1</td>
        <td>Body cell 2</td>
      </tr>
    </tbody>
  </table>
</div>

<table>
  <thead>
    <tr>
      <th>Heading cell 1</th>
      <th>Heading cell 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body cell 1</td>
      <td>Body cell 2</td>
    </tr>
  </tbody>
</table>
4

Not a Hugo problem, then. The table is there, it just looks different from what you expect. Fix the CSS so that it looks as you want it to.

1 Like