Table layout not honored in Kookaburra post

Backlight 4, 5 & 6 Support
#1

BL6, Kookaburra template

Inserting in a blog post the following md:

| Left | Center | Right |
| :--- | :----: | ---:  |

Does give in the editing environment as expected: Left aligned to left, Center to center and Right to right.
However, in the published blog post the three words are concatenated and aligned left:

LeftCenterRight

This is for this specific layout; it seems to happen for other layouts as well.

Checked in a Pangolin page, behaving as expected.

#2

Tables work in Kookaburra page. But I’m seeing the same thing as you in a Kookaburra blog post.

#3

I just noticed that Matt has added table styling to the Kookaburra roadmap.

#4

In v6.3.1 (2025-06-07) we have now: “Kookaburra Page: Styling of code and table elements.”. Does this only apply to pages, not to blog posts?
For pages and post: how do you do this? Any documentation?

#5

I assume it applies to blog posts as well since the TTG blog uses Kookaburra blog and Matt has example tables here:
https://theturninggate.net/blog/update-backlight-6-3-1

#6

It applies globally, but you might need to conform your table markup to a supported pattern. Our table styling conforms to Markdown standard output. So this:

| City        | Population (approx.) | Notable Feature                     |
|-------------|----------------------|-------------------------------------|
| Seoul       | 9.5 million          | Capital city, tech and culture hub  |
| Busan       | 3.4 million          | Largest port, famous for beaches    |
| Incheon     | 3.0 million          | Major airport and smart city        |
| Daegu       | 2.4 million          | Textiles and fashion industry       |
| Daejeon     | 1.5 million          | Science and R&D center              |

Converts to this:

<table>
  <thead>
    <tr>
      <th>City</th>
      <th>Population (approx.)</th>
      <th>Notable Feature</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Seoul</td>
      <td>9.5 million</td>
      <td>Capital city, tech and culture hub</td>
    </tr>
    <tr>
      <td>Busan</td>
      <td>3.4 million</td>
      <td>Largest port, famous for beaches</td>
    </tr>
    <tr>
      <td>Incheon</td>
      <td>3.0 million</td>
      <td>Major airport and smart city</td>
    </tr>
    <tr>
      <td>Daegu</td>
      <td>2.4 million</td>
      <td>Textiles and fashion industry</td>
    </tr>
    <tr>
      <td>Daejeon</td>
      <td>1.5 million</td>
      <td>Science and R&amp;D center</td>
    </tr>
  </tbody>
</table>
#7

It seems I misinterpreted ‘styling options’, as the possibilty to define by the admin the styling of a table (width, coloring, …).
Specifically the starting question, I wanted to define a table over the full width. In Pangolin it is case
width: 100%;
Whereas in Kookaburra it becomes:
width: fit-content;

I am using it to (manually) create a Next / Previous line (example).
Fiddling a bit… I tried to set a dev section around the table, but the content becomes just the text i.s.o. interpreted macro’s.
I would be easier if that was a standard feature…

#8

I don’t think you can put Markdown inside html. So surrounding the table with a div will render the Markdown as text.
Instead, try writing the table in html.

#9

You can use a custom stylesheet to override my default styling, if that’s what you want to do.

Or add some utility classes, if you want to write your own HTML, and do like <table class="full-width"> ...

You can also use selector targeting, if you want to be able to write in markdown. For example, I’ve done this:

hr[data-sticky]:has(+ table) {
	border: none;
	height: 0;
	margin: 0;
}

hr[data-sticky]:has(+ table) + table thead th:first-child,
hr[data-sticky]:has(+ table) + table tbody td:first-child {
	background-color: var(--tableHeadBackgroundColor);
	background-clip: padding-box;
	left: 0;
	position: sticky;
	z-index: 1;
}

And that’s how the table with a sticky first column (last example on the page) works on this blog post:

https://theturninggate.net/blog/update-backlight-6-3-1

That let’s me apply a different style, while still using Markdown, by putting an HR element before my table markup:

<hr data-sticky />

| Region    | Generation | First Game Appearance | Main Titles             | Number of Cities | Number of Routes | Legendary Pokémon | Starter Types        | Professor     | Evil Team         | Champion         | Remakes         | Real-World Influence | Notes                            |
|-----------|------------|------------------------|--------------------------|------------------|------------------|--------------------|----------------------|----------------|-------------------|------------------|------------------|------------------------|----------------------------------|
| Kanto     | I          | Red/Green/Blue         | Red/Blue/Yellow          | 10               | 25               | Mewtwo, Legendary Birds | Grass/Fire/Water   | Oak            | Team Rocket       | Blue             | FireRed/LeafGreen | Kantō (Japan)         | First region introduced          |
1 Like