HTML-tables not rendered correctly (markdown mode) #2039

New Issue

OVERLORD · 2026-02-05T02:40:11+03:00

OVERLORD commented

2026-02-05 02:40:11 +03:00

Originally created by @nightsparc on GitHub (Jan 15, 2021).

First of all - thank you for Bookstack! It's really amazing! We're using it quite heavily and enjoying it's features - especially the diagrams.net integration!

Describe the bug
As described above, we use it for most of our documentation, which includes project and meeting protocols, which includes a common header on the respective pages (for which we're using the page template feature). Atm this header is defined in plain HTML.

[![Logo](https://profilersuzanne.com/wp-content/uploads/2018/02/logo-dummy.png)](https://profilersuzanne.com/wp-content/uploads/2018/02/logo-dummy.png)| | 
---: | :--- | ---:
Betreff   | <center><b>Titel eingeben</b></center> |
Zeit | xx.xx.2020, xx:00 Uhr - xx:00 Uhr |
Ort   | 104/103 |
Teilnehmer   | us and the others|
<style>
table {
    width:100%;
}
table th:first-of-type {
    width: 15%;
}
table th:nth-of-type(2) {
    width: 70%;
}
table th:nth-of-type(3) {
    width: 15%;
}
</style>

Since the update to v0.31.2, rendering of this table is broken in the final rendering view (it still works in the edit-preview). I think we can change our header to markdown instead of HTML, however, HTML code should be usable from inside MD, so still a bug :)

I think this is somehow related to #2452 and #2470, however the rendering is still not working after upgrading to v0.31.3.

Steps To Reproduce
Steps to reproduce the behavior:

Create a new page (markdown editor)
Copy the HTML code above
Be happy to see a beautiful table on the right ;)
Save the page
See the broken rendering and start crying :D

Expected behavior
Ah, it should be rendered correctly (and identically) in both preview and final rendering.

Screenshots

Correct rendering in edit/preview:

Broken rendering:

Your Configuration (please complete the following information):

Bookstack version: tried both v0.31.2 and v0.31.3
PHP Version:

$ php --version
PHP 7.2.24-0ubuntu0.18.04.7 (cli) (built: Oct  7 2020 15:24:25) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.2.24-0ubuntu0.18.04.7, Copyright (c) 1999-2018, by Zend Technologies

Hosting Method (Nginx/Apache/Docker): nginx/1.14.0

Additional context

Originally created by @nightsparc on GitHub (Jan 15, 2021). First of all - thank you for Bookstack! It's really amazing! We're using it quite heavily and enjoying it's features - especially the diagrams.net integration! --- **Describe the bug** As described above, we use it for most of our documentation, which includes project and meeting protocols, which includes a common header on the respective pages (for which we're using the page template feature). Atm this header is defined in plain HTML. ```HTML [![Logo](https://profilersuzanne.com/wp-content/uploads/2018/02/logo-dummy.png)](https://profilersuzanne.com/wp-content/uploads/2018/02/logo-dummy.png)| | ---: | :--- | ---: Betreff | <center><b>Titel eingeben</b></center> | Zeit | xx.xx.2020, xx:00 Uhr - xx:00 Uhr | Ort | 104/103 | Teilnehmer | us and the others| <style> table { width:100%; } table th:first-of-type { width: 15%; } table th:nth-of-type(2) { width: 70%; } table th:nth-of-type(3) { width: 15%; } </style> ``` Since the update to **v0.31.2**, rendering of this table is broken in the final rendering view (it still works in the edit-preview). I think we can change our header to markdown instead of HTML, however, HTML code should be usable from inside MD, so still a bug :) I think this is somehow related to #2452 and #2470, however the rendering is still not working after upgrading to **v0.31.3**. **Steps To Reproduce** Steps to reproduce the behavior: 1. Create a new page (markdown editor) 2. Copy the HTML code above 3. Be happy to see a beautiful table on the right ;) 4. Save the page 5. See the broken rendering and start crying :D **Expected behavior** Ah, it should be rendered correctly (and identically) in both preview and final rendering. **Screenshots** Correct rendering in edit/preview: ![image](https://user-images.githubusercontent.com/17517082/104747292-a3151480-5750-11eb-91f5-8bde33d3861a.png) Broken rendering: ![image](https://user-images.githubusercontent.com/17517082/104747797-3a7a6780-5751-11eb-8087-7823db5fabde.png) **Your Configuration (please complete the following information):** - Bookstack version: tried both **v0.31.2** and **v0.31.3** - PHP Version: ```shell $ php --version PHP 7.2.24-0ubuntu0.18.04.7 (cli) (built: Oct 7 2020 15:24:25) ( NTS ) Copyright (c) 1997-2018 The PHP Group Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies with Zend OPcache v7.2.24-0ubuntu0.18.04.7, Copyright (c) 1999-2018, by Zend Technologies ``` - Hosting Method (Nginx/Apache/Docker): nginx/1.14.0 **Additional context**

OVERLORD closed this issue

2026-02-05 02:40:16 +03:00

OVERLORD commented

2026-02-05 02:40:23 +03:00

@ssddanbrown commented on GitHub (Jan 16, 2021):

Hi @nightsparc,
Thanks for raising this with the clear examples.

For v0.31 I updated pages to be markdown-rendered on the back-end, to support the API and provide some options in the future. As you've seen there have been some differences now between the preview renderer and the final (Upon save) renders used which I've been trying to close the gap on.

In this case, I think it just may be that the front-end render is a little more forgiving to possible syntax. I was able to make your pasted markdown table code work by adjusting the second line to just:

---: | :--- |

The pipes infer a boundary, both between cells and on the outer edges of cells. All other rows could be seen as two cells but that second line had three cells of content, which I think threw the render off.

BTW, the code you've provided is markdown syntax (Table and image) with HTML sprinkled in (<style> and <center><b>), Not just plain HTML.

@ssddanbrown commented on GitHub (Jan 16, 2021): Hi @nightsparc, Thanks for raising this with the clear examples. For v0.31 I updated pages to be markdown-rendered on the back-end, to support the API and provide some options in the future. As you've seen there have been some differences now between the preview renderer and the final (Upon save) renders used which I've been trying to close the gap on. In this case, I think it just may be that the front-end render is a little more forgiving to possible syntax. I was able to make your pasted markdown table code work by adjusting the second line to just: ``` ---: | :--- | ``` The pipes infer a boundary, both between cells and on the outer edges of cells. All other rows could be seen as two cells but that second line had three cells of content, which I think threw the render off. BTW, the code you've provided is markdown syntax (Table and image) with HTML sprinkled in (`<style>` and `<center><b>`), Not just plain HTML.

OVERLORD commented

2026-02-05 02:40:30 +03:00

@nightsparc commented on GitHub (Jan 18, 2021):

Hi @ssddanbrown

thanks a lot for the fast reply and the explanation! I removed the superfluous cell from the table and it actually worked :D what a surprise ;) thanks for pointing that out!

The pipes infer a boundary, both between cells and on the outer edges of cells. All other rows could be seen as two cells but that second line had three cells of content, which I think threw the render off.

Oh, yes you're right 🙈 sorry for bothering you with that! I'm not sure, why we had the ---: on the right in the first place. Guess, my colleague was testing something 🤷‍♂️

BTW, the code you've provided is markdown syntax (Table and image) with HTML sprinkled in ...

You're absolutely right. Ah, sorry again - and thanks again for the fast reply.

@nightsparc commented on GitHub (Jan 18, 2021): Hi @ssddanbrown thanks a lot for the fast reply and the explanation! I removed the superfluous cell from the table and it actually worked :D what a surprise ;) thanks for pointing that out! > The pipes infer a boundary, both between cells and on the outer edges of cells. All other rows could be seen as two cells but that second line had three cells of content, which I think threw the render off. Oh, yes you're right :see_no_evil: sorry for bothering you with that! I'm not sure, why we had the `---:` on the right in the first place. Guess, my colleague was testing something :man_shrugging: > BTW, the code you've provided is markdown syntax (Table and image) with HTML sprinkled in ... You're absolutely right. Ah, sorry again - and thanks again for the fast reply.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#2039