# ⚡ Rich Text \> Actions!

**URL:** <https://community.glideapps.com/t/rich-text-actions/27273>\
**Category:** Ask for Help\
**Created:** [May 26, 2021, 8:05pm UTC](https://community.glideapps.com/t/rich-text-actions/27273 "2021-05-26T20:05:28Z")\
**Posts on this page:** 1\
**Showing post:** 12

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [May 27, 2021, 1:35pm UTC](https://community.glideapps.com/t/rich-text-actions/27273/12 "2021-05-27T13:35:05Z")

</div>

Sure!

One thing that isn’t obvious from the screen shot is that two of those tables are collapsable:

That’s done in the usual way, using HTML `<details><summary>` tags. Although getting it to play nicely with the tables was a bit fiddly.

Anyway… I used [HTML Table Styler ▦ CSS Generator | 𝗗𝗜𝗩𝗧𝗔𝗕𝗟𝗘.𝗖𝗢𝗠](https://divtable.com/table-styler/) to come up with the basic table structure and CSS, and then butchered the CSS until I got it looking how I wanted. My CSS-fu is not very strong, so I suspect there is a lot of bloat there that could be jettisoned 😂

Here’s the table structure for the middle table (Devices):

```auto
<details>
  <summary>
    <div class="redTable outerTableFooter">
      <div class="tableFootStyle">
        <div class="links">Devices</div>
      </div>
    </div>
  </summary>
<div class="divTable redTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">Name</div>
<div class="divTableHead">Status</div>
<div class="divTableHead">Last Updated</div>
</div>
</div>
<div class="divTableBody">
{jl-table-rows}
</div>
</div>
</details>

```

`{jl-table-rows}` (as the name suggests), is a joined list column that pulls in the table rows for each individual device. The Device table has a template column that looks like:

```auto
<div class="divTableRow">
<div class="divTableCell">{name}</div>
<div class="divTableCell">{status}</div>
<div class="divTableCell">{updated}</div>
</div>

```

All 3 tables use the same CSS (obviously):

```auto
<pre><span><style>
summary {list-style: none}
summary::-webkit-details-marker {display: none; }
details summary { 
  cursor: pointer;
}
div.redTable {
  border: 2px solid #A40808;
  background-color: #EEE7DB;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
.divTable.redTable .divTableCell, .divTable.redTable .divTableHead {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
.divTable.redTable .divTableBody .divTableCell {
  font-size: 13px;
}
.divTable.redTable .divTableRow:nth-child(even) {
  background: #F5C8BF;
  color: #000000;
}
.divTable.redTable .divTableRow:nth-child(odd) {
  color: #000000;
}
.divTable.redTable .divTableRow .divTableCell:nth-child(1) {
  text-align: left;
}
.divTable.redTable .divTableHeading {
  background: #A40808;
}
.divTable.redTable .divTableHeading .divTableHead {
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #A40808;
}
.divTable.redTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}

.redTable .tableFootStyle {
  font-size: 13px;
  font-weight: bold;
  color: #FFFFFF;
  background: #A40808;
  border-left: 2px solid #A40808;
}
.redTable .tableFootStyle {
  font-size: 20px;
  border-left: 2px solid #A40808;
}
.redTable .tableFootStyle .links {
  text-align: center;
  border-left: 2px solid #A40808;
}
.redTable .tableFootStyle .links a{
  display: inline-block;
  background: #FFFFFF;
  color: #A40808;
  padding: 2px 8px;
  border-radius: 5px;
  border-left: 2px solid #A40808;
}
.redTable.outerTableFooter {
  border: 1px solid #A40808;
}
.redTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

```

And that’s it!  
I’ve been using this technique to build tables for a while now, and really happy with the results I’ve been getting. The nice thing about the joined list approach is that you can feed that through a multi-relation to produce dynamic (filterable) tables, as well as dynamic record counts by doing rollups through the relation 🙂

---

_[View the full topic](https://community.glideapps.com/t/rich-text-actions/27273)._