Not sure if this is what you are talking about, but this is what I have in my app.
It’s an html table, because I needed the ability to span the width 100%, change the font size, and get the layout I want. I’ve been unable to get close to this with markdown, although the process I explain below would work for markdown as well.
If you are familiar with html tables, then you will see that what I am doing, is I have a lessons sheet where I dynamically build each <tr>
table row for each lesson.
In my Invoices sheet, I have a multiple relation to the Lessons sheet. Using that relation, I create a Joined List column which combines all of the <tr>
column rows from the Lessons sheet and joins them into one column value.
Finally I take that Joined List column value and wrap with the <table>
tags inside of a template column. This is displayed inside of a Rich Text component.
To get the alternating gray bar and surrounding border, I added another rich text component with the following CSS.
<span><style>
.gJGZti {height:6px;}
tr:nth-child(odd) { background: #ddd; }
table {
border-collapse: collapse;
border: 3px solid #2B3C4A;
width: 100%;
}
th, td {
text-align: left;
padding: 3px;
}
</span></style>