HTML table and Rich text component (borders/style question)

Ask for Help
1

Hi All,

i am trying to make table from my data using html.
There is Html code for table, and “RichText” component normally perform all html markup.

So i try

<table>
<caption>Table</caption>
<tr>
<th>Column1</th><th>Column2</th>
</tr>
<tbody>
<tr>
<td>test</td><td>test</td>
</tr>
<tr>
<td>test</td><td>test</td>
</tr>
</tbody>
</table>

It makes table without borders. So i added style block

<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>

<table>
<caption>Table</caption>
<tr>
<th>Column1</th><th>Column2</th>
</tr>
<tbody>
<tr>
<td>test</td><td>test</td>
</tr>
<tr>
<td>test</td><td>test</td>
</tr>
</tbody>
</table>

But it gives no effect.

So is there possibility to make RichText Component draw html table with borders?

2

Exactly possible, just ask Gemini to craft table to use in GlideApps Rich Text component

image
image2542×1115 184 KB

Here’s a complete, step-by-step guide on how to create beautiful, responsive, and reliable HTML tables for the Rich Text component in Glide Apps — based on both best practices and all the lessons we’ve learned in our collaboration.

:blue_book: Glide Rich Text Table Guide (2024/2025 Edition)

:white_check_mark: What Glide Rich Text Supports

The Rich Text component does support basic HTML and CSS styles — but with important limitations due to Glide’s sandboxed rendering environment.

:check_mark: Safe, supported elements:

  • <div>, <table>, <tr>, <td>, <th>
  • <strong>, <em>, <br>, <h2>, <h3>, <p>
  • CSS inline styles (style="...") on all of the above

:prohibited: Not supported:

  • External stylesheets (<style>, <link>)
  • <script>, <iframe>, <style> blocks
  • External fonts and media queries
  • <colgroup>, <thead> features like sticky

:bullseye: Goal: A clean, mobile-friendly table that works in:

  • :white_check_mark: Rich Text in Glide
  • :white_check_mark: Mobile view
  • :white_check_mark: PDF exports (if needed)
  • :white_check_mark: Print layout

:hammer_and_wrench: Structure of a Glide-Friendly Table

:white_check_mark: Basic structure:

<div style="overflow-x:auto;max-width:100%;">
  <div style="max-width:600px;margin:0 auto;">
    <table style="width:100%;border-collapse:collapse;font-size:13px;">
      <thead>
        <tr style="background:#f0f0f0;">
          <th style="padding:8px;border:1px solid #ccc;white-space:nowrap;">Column 1</th>
          <th style="padding:8px;border:1px solid #ccc;white-space:nowrap;">Column 2</th>
        </tr>
      </thead>
      <tbody>
        <tr style="page-break-inside: avoid;">
          <td style="padding:8px;border:1px solid #ccc;">Value 1</td>
          <td style="padding:8px;border:1px solid #ccc;text-align:center;">Value 2</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

:white_check_mark: Key Design Guidelines

1. :mobile_phone: Responsive Layout

  • Wrap the table in a div with overflow-x:auto to enable horizontal scroll on mobile.
  • Contain the table with a fixed max-width (600px, 768px, or 100% depending on context).

2. :artist_palette: Styling the Table

  • Use border-collapse:collapse; to keep the table clean.
  • Apply border:1px solid #ccc; to all <td> and <th>.
  • Use white-space:nowrap; except for long text columns (like product names).
  • Use font-size:13px–14px for clarity and printing.

3. :brick: Prevent Text Breaking Mid-Line

  • Use style="page-break-inside: avoid;" on <tr>, <thead>, and <div> blocks.
  • This ensures no cell or text is split across pages when printing or exporting PDF.

4. :magic_wand: Handle “Total” Columns

  • Prevent line breaks inside “Total” cells:
    style="white-space:nowrap;min-width:120px;font-weight:bold;text-align:center;"
    This ensures 1 000 000 ₽ doesn’t break.

5. :toolbox: Table Variants by Mode

For more advanced layouts:

  • Detailed Mode: Use multiple tables grouped by sections or rooms.
  • Simple Mode: Use a single table with all items, then optionally list group names separately.

:printer: Best Practices for Print/PDF Export

:white_check_mark: Use:

  • <tr style="page-break-inside: avoid;"> for every row
  • class="no-break" or style="page-break-inside: avoid;" on totals, headers, etc.
  • min-width on narrow columns to prevent currency wrap

:prohibited: Avoid:

  • Wrapping the whole <table> in a “no-break” block — it blocks page flow
  • Using flexbox, gap, or overflow:hidden — these can behave inconsistently in PDF

:package: Custom Features You Can Add

:framed_picture: Banner Logo (Header)

<img src="..." style="width:100%;max-width:80%;display:block;margin:0 auto;">

:speech_balloon: Comments, Notes

Use:

<div style="margin-top:12px;"><strong>Note:</strong><br><em>Text here...</em></div>

:receipt: Totals & Summary

Align right:

<div style="text-align:right;"><strong>Total:</strong> 1 000 ₽</div>

:mechanic: Creator Block

<div style="padding:8px;border:2px solid #000;text-align:center;font-weight:bold;">
  Created by: John Doe
</div>

:white_check_mark: Final Tips

:white_check_mark: Do This :cross_mark: Avoid This
Use white-space: nowrap on key cells Letting prices wrap onto new lines
Center all data except names Justifying all content
Use min-width for total cells Flexible columns for currency
Use page-break-inside: avoid; Global table no-breaks (too strict)
Test on mobile AND desktop Assuming Glide always renders the same

:test_tube: Testing Checklist

:white_check_mark: Renders in Rich Text (mobile + desktop)
:white_check_mark: Table scrolls horizontally on small screens
:white_check_mark: Text and prices never wrap mid-line
:white_check_mark: Page breaks do not split rows
:white_check_mark: Table prints and exports cleanly
:white_check_mark: Totals are readable, aligned, and unbroken

3 Likes
3

The reason your table appears borderless in the Rich Text component in GlideApps is that most inline styles are stripped or ignored, especially the <style> tag — it’s sandboxed for security and performance reasons.

To fix this and make borders visible, you need to use inline styles directly inside your table elements, like this:

<table style="border-collapse: collapse; width: 100%; font-family: arial, sans-serif;">
  <caption>Table</caption>
  <tr>
    <th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Column1</th>
    <th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Column2</th>
  </tr>
  <tr style="background-color: #dddddd;">
    <td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">test</td>
    <td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">test</td>
  </tr>
  <tr>
    <td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">test</td>
    <td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">test</td>
  </tr>
</table>

:white_check_mark: What changed:

  • Removed the <style> block
  • Applied styles inline (style="...") directly to <table>, <th>, <td>, and rows
1 Like
4

That’s very useful - now I can remember what and what isn’t supported :grin:

1 Like
5

AI remember everything. Every time I asks AI to craft correct code for me.

2 Likes
6

Thanks brother!

You deserve :pizza: :pizza: .. great tip.

7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.