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

**URL:** <https://community.glideapps.com/t/html-table-and-rich-text-component-borders-style-question/81262>\
**Category:** Ask for Help\
**Created:** [April 10, 2025, 10:40am UTC](https://community.glideapps.com/t/html-table-and-rich-text-component-borders-style-question/81262 "2025-04-10T10:40:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexey\_Khrolovich](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexey_khrolovich/32/37980_2.png) [@Alexey\_Khrolovich](https://community.glideapps.com/u/Alexey_Khrolovich)\
**Post date:** [April 10, 2025, 10:40am UTC](https://community.glideapps.com/t/html-table-and-rich-text-component-borders-style-question/81262/1 "2025-04-10T10:40:42Z")

</div>

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

```auto
<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

```auto
<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?

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [April 10, 2025, 11:19am UTC](https://community.glideapps.com/t/html-table-and-rich-text-component-borders-style-question/81262/2 "2025-04-10T11:19:07Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/b/bbd8fa0194706e9299c3d353a60683c1c4fcd25d.jpeg)

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.

* * *

# 📘 Glide Rich Text Table Guide (2024/2025 Edition)

## ✅ 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.

### ✔ Safe, supported elements:

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

### 🚫 Not supported:

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

* * *

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

- ✅ **Rich Text in Glide**
- ✅ **Mobile view**
- ✅ **PDF exports (if needed)**
- ✅ **Print layout**

* * *

# 🛠 Structure of a Glide-Friendly Table

### ✅ Basic structure:

```html
<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>

```

* * *

# ✅ Key Design Guidelines

### 1. 📱 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. 🎨 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. 🧱 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. 🪄 Handle “Total” Columns

- Prevent line breaks inside “Total” cells:

```html
style="white-space:nowrap;min-width:120px;font-weight:bold;text-align:center;"

```

This ensures `1 000 000 ₽` doesn’t break.

### 5. 🧰 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.

* * *

# 🖨 Best Practices for Print/PDF Export

### ✅ 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

### 🚫 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

* * *

# 📦 Custom Features You Can Add

### 🖼 Banner Logo (Header)

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

```

### 💬 Comments, Notes

Use:

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

```

### 🧾 Totals & Summary

Align right:

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

```

### 🧑‍🔧 Creator Block

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

```

* * *

# ✅ Final Tips

| ✅ Do This | ❌ 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 |

* * *

# 🧪 Testing Checklist

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

* * *

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [April 10, 2025, 11:36am UTC](https://community.glideapps.com/t/html-table-and-rich-text-component-borders-style-question/81262/3 "2025-04-10T11:36:16Z")

</div>

> [@Alexey\_Khrolovich](#):
>
> But it gives no effect.

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:

```html
<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>

```

✅ **What changed** :

- Removed the `<style>` block
- Applied styles inline (`style="..."`) directly to `<table>`, `<th>`, `<td>`, and rows

---

<div class="post-metadata">

**Author:** ![fk1214](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fk1214/32/71058_2.png) [@fk1214](https://community.glideapps.com/u/fk1214)\
**Post date:** [April 10, 2025, 12:02pm UTC](https://community.glideapps.com/t/html-table-and-rich-text-component-borders-style-question/81262/4 "2025-04-10T12:02:24Z")

</div>

> [@slscustom.ru](#):
>
> # 📘 Glide Rich Text Table Guide (2024/2025 Edition)
> 
> ## ✅ 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.
> 
> ### ✔ Safe, supported elements:
> 
> - `<div>`, `<table>`, `<tr>`, `<td>`, `<th>`
> - `<strong>`, `<em>`, `<br>`, `<h2>`, `<h3>`, `<p>`
> - CSS inline styles (`style="..."`) on all of the above
> 
> ### 🚫 Not supported:
> 
> - External stylesheets (`<style>`, `<link>`)
> - `<script>`, `<iframe>`, `<style>` blocks
> - External fonts and media queries
> - `<colgroup>`, `<thead>` features like `sticky`

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

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [April 10, 2025, 12:30pm UTC](https://community.glideapps.com/t/html-table-and-rich-text-component-borders-style-question/81262/5 "2025-04-10T12:30:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [April 10, 2025, 6:30pm UTC](https://community.glideapps.com/t/html-table-and-rich-text-component-borders-style-question/81262/6 "2025-04-10T18:30:46Z")

</div>

Thanks brother!

You deserve 🍕 🍕 .. great tip.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [April 17, 2025, 6:31pm UTC](https://community.glideapps.com/t/html-table-and-rich-text-component-borders-style-question/81262/7 "2025-04-17T18:31:05Z")

</div>

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