Hi @Christopher Bailey,

You need to use HTML table to render in Markdown Renderer block. If you need to add dynamic data inside table just prepare your table in a text variable and pass that variable into block.

Result:

I have attached OML file also.

Thanks,

Sanjay Kushwah 

Hey.
Writing raw HTML tables (<table><tr><td>) inside text variables as a workaround when tables "fail" to render, does work. However, writing manual HTML tags completely defeats the purpose of using Markdown in your application.

The good news is that the underlying engine (marked.js) does natively support GFM (GitHub Flavored Markdown) tables out of the box. It successfully parses standard Markdown tables (e.g., using pipes | and dashes -) and injects semantically correct <table>, <thead>, <th>, and <td> tags into the DOM.

Why do tables look "broken" then?

The issue is not the markdown parser; it's OutSystems UI. OutSystems UI has highly aggressive reset stylesheets that strip away borders, cell paddings, margins, and backgrounds from native HTML tables to keep platform-specific data grids flat. This makes parsed markdown tables collapse horizontally, with all text running together without borders or spacing.

The Clean, Low-Code Fix

Instead of writing raw HTML hacks, you can easily restore your tables by adding scoped CSS rules to your Markdown block's stylesheet (targeting your wrapper class, e.g., .markdown-textblock).

This ensures your markdown tables look stunning without affecting any other native OutSystems tables in your application. As a bonus, adding an overflow-x: auto wrapper protects your UI on mobile viewports by enabling horizontal scrolling if a table is too wide for the phone screen.

Here is the clean CSS you can add to your Markdown Block Style Sheet:

======================================================================================================================================================================

/* --- 1. Mobile Responsiveness: Prevents wide tables from clipping on phones --- */

.markdown-textblock {

    overflow-x: auto; 

    -webkit-overflow-scrolling: touch;

}

/* --- 2. Clean, Modern Markdown Table Styling --- */

.markdown-textblock table {

    border-collapse: collapse;

    width: 100%;

    margin: 16px 0;

    font-size: 14px;

    line-height: 1.5;

    text-align: left;

}

/* Base cell padding & borders (works smoothly on both light and dark themes) */

.markdown-textblock th,

.markdown-textblock td {

    border: 1px solid rgba(255, 255, 255, 0.15); /* Adjust border color based on your theme */

    padding: 10px 14px;

}

/* Distinctive Table Header style */

.markdown-textblock th {

    background-color: rgba(255, 255, 255, 0.08); /* Subtle dark header background */

    font-weight: 600;

}

/* Subtle zebra striping for improved reading scanning */

.markdown-textblock tr:nth-child(even) {

    background-color: rgba(255, 255, 255, 0.03);

}

/* Dynamic row hover state */

.markdown-textblock tr:hover {

    background-color: rgba(255, 255, 255, 0.05);

}

======================================================================================================================================================================

By adding these rules, you can keep typing clean, standard Markdown text in your database, and let the browser render beautifully structured, mobile-safe tables automatically.

Hope this helps clean up your markdown implementations!

______________________________________________________________________________________________________________

Disclaimer note: this message was built by AI, but tested by me (a human xD).