How to add specific css properties for table header, row and cell elements in Asciidoc

Question

It is possible to add specific classes to a table in asciidoc, as follows:

ASCIIDOC

[.custom]
[cols="40a,80a",options="header"]
|===

|First Name
|Family Name

|John
|Smith

|==

HTML (after Antora run)

<table class="tableblock frame-all grid-all stretch custom">
..
..
<thead>
<tr>
<th class="tableblock halign-left valign-top"><strong>First Name</strong></th>
<th class="tableblock halign-left valign-top"><strong>Family Name</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph"><p>John</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph"><p>Smith</p></div></div></td>
</tr>

So, the "role" of "custom" has been applied to the <table> element. However, I also want to specify specific properties for the <th>, <tr> and <td> elements. How do I do this ?

I have attempted:

|[.custom]First Name

for a th element, and:

|[.custom]John

for a td element

but this only gives me the following when converted to html:

<th class="tableblock halign-left valign-top"><strong class="custom">First Name</strong> 
</th>
..
<td class="tableblock halign-left valign-top"><div class="content"><div class="paragraph"><p>[.custom]John</p></div></div></td>

How do I achieve the following:

<th class="tableblock halign-left valign-top custom"><strong>First Name</strong></th>

and

<tr class="tableblock halign-left valign-top custom"><div class="content"><div class="paragraph"><p>John</p></div></div></td>

Answer 1

You should use a delimiter for inline roles, to make sure that they parse consistently. For example:

| [.custom]*John*
| [.specific]`Woo`

The delimiter affects the HTML generated, so the first instance results in a <strong> tag, and the second in a <code> block. Both have the specified class though.

Unfortunately, the role applies to the text content, not the <th> or <td>. There is currently no way to specify a role for the cell itself.

To achieve the presentation that you want, you'll have to use CSS selectors based on the table's class. That would require adding custom CSS to your Antora UI. Perhaps something like:

table.custom th, table.custom td {
 /* appropriate styles */
}