The accordion table is build with HTML and JavaScript and can be styled using CSS. You should store your custom CSS in your FileMaker database and then use Substitute() to swap out the __css__ placeholder text in the HTML with your own custom CSS.

A good way to develop your custom styling is to take the results of your merged HTML calculation field and save it to an HTML file on your computer. You can then edit the CSS using your preferred text editor or IDE before copying the CSS back into FileMaker.

Style Hints

There are a number of pre-set, undefined CSS classes you can take advantage of to help style your tables the way you want. The information below may help you with some basic style configuration.

Even/odd row colors

You can use tr.even and tr.odd to style even and odd rows in your table, similar to the FileMaker “Use alternate row state” option in a portal or list view.

Here is an example setting even rows to a light gray, while leaving odd rows a standard white:

tr.even {
    background-color: rgba(0, 0, 0, 0.03);
}

Buttons

The included standard CSS includes styling for adding buttons to a table cell. You can give a cell the cell-button class to get a pre-configured button appearance for the cell. This works great if you want to make something like an “Open” button separate from a clickable value in a row.

Child table styling

Every table gets a depth property which indicates which level of nesting the table is in. A top-level table will have the depth-0 CSS class, while a first level child table will be depth-1, a second child down will be depth-2, etc. You can take advantage of this to make your child tables look different than the top-level parent table.

Column horizontal alignment

Columns can be left, center, or right aligned by setting a class on the headers. Columns will align to the left by default, but you can right-align or center-align columns by giving the headers the align-right or align-center classes. All the cells in the column will match the alignment of the headers automatically.

Carat style

You can change the color of the carat by setting the .carat > path style. Here’s an example filling and coloring the carat blue.

.carat > path {
    fill: #2f98cc;
    stroke: #2f98cc;
    stroke-width: 1px;
}

Header row background and text color

Change the style of the header row by setting the .table > thead > tr > th style. Here’s an example which sets the header row to be red with white text and a black bottom border.

.table > thead > tr > th {
    color: #white;
    background-color: darkred;
    border-bottom: black 2px solid;
}