⚡ Rich Text > Actions!

Ask for Help
12

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 | 𝗗𝗜𝗩𝗧𝗔𝗕𝗟𝗘.𝗖𝗢𝗠 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 :joy:

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

<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:

<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):

<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 :slight_smile:

27 Likes