Page 1 of 1
How to set custom background fill of the custom row/cell/column - that is not header of the table??
Posted: Tue Oct 25, 2022 3:56 pm
by DAN SEA
How can I set the fill color of a selected row or cell or column of a table, that is not a "header of the table"?
For example, somewhere in the middle of the table, etc.?
As far as i understand, for this it is necessary to create (because making changes to an existing one, such as "entry" - will change everything in the tables) some kind of custom CSS-class that has the desired fill color and specify it in the attributes of the selected cell or row or column? If so, I don't really understand if I have the right to create such custom classes
...
Thanks in advance!
Re: How to set custom background fill of the custom row/cell/column - that is not header of the table??
Posted: Wed Oct 26, 2022 11:28 am
by julien_lacour
Hello Dan,
Of course you can create your own
custom CSS stylesheet. Once the file is created, you just need to reference it in a
publishing template or as args.css parameter in the transformation scenario.
The most simple rule to select the table cells outside of the table header is to add topic/tbody to the selector:
Code: Select all
*[class ~= "topic/tbody"] *[class ~= "topic/entry"] {
background-color: yellow;
}
You can also use *[class ~= "topic/tbody"] *[class ~= "topic/row"], the result will be the same.
Regards,
Julien
Re: How to set custom background fill of the custom row/cell/column - that is not header of the table??
Posted: Wed Oct 26, 2022 11:34 am
by julien_lacour
If you want a whole column, you can use the
:nth-of-type() CSS pseudo-class.
For example you can select the second column:
Code: Select all
*[class ~= "topic/tbody"] *[class ~= "topic/entry"]:nth-of-type(2) {
background-color: yellow;
}
Or you can select all the odd columns:
Code: Select all
*[class ~= "topic/tbody"] *[class ~= "topic/entry"]:nth-of-type(odd) {
background-color: yellow;
}
This pseudo-class works exactly in the same way for rows.
For example you can select the fourth row:
Code: Select all
*[class ~= "topic/tbody"] *[class ~= "topic/row"]:nth-of-type(4) {
background-color: yellow;
}
Or you can select all the even rows:
Code: Select all
*[class ~= "topic/tbody"] *[class ~= "topic/row"]:nth-of-type(even) {
background-color: yellow;
}
Regards,
Julien
Re: How to set custom background fill of the custom row/cell/column - that is not header of the table??
Posted: Wed Oct 26, 2022 11:41 am
by julien_lacour
Another use-case is to select only a specific cell/row, in this case you can use DITA @outputclass attribute.
Let's take this example, I want a cell and a row colored, first I add the @outputclass attributes:
Code: Select all
<table frame="none">
<title>Flowers</title>
<tgroup cols="3">
<colspec colname="c1" colnum="1" colwidth="171pt"/>
<colspec colname="c2" colnum="2" colwidth="99pt"/>
<colspec colname="newCol3" colnum="3" colwidth="150pt"/>
<thead>
<row>
<entry>Flower</entry>
<entry>Type</entry>
<entry>Soil</entry>
</row>
</thead>
<tbody>
<row>
<entry>Chrysanthemum</entry>
<entry outputclass="colored">perennial</entry>
<entry>well drained</entry>
</row>
<row>
<entry>Gardenia</entry>
<entry>perennial</entry>
<entry>acidic</entry>
</row>
<row outputclass="colored">
<entry>Gerbera</entry>
<entry>annual</entry>
<entry>sandy, well-drained</entry>
</row>
</tbody>
</tgroup>
</table>
Then I add the following rule in my CSS custom stylesheet:
Code: Select all
*[class ~= "topic/tbody"] *[outputclass ~= "colored"] {
background-color: yellow;
}
Regards,
Julien
Re: How to set custom background fill of the custom row/cell/column - that is not header of the table??
Posted: Fri Oct 28, 2022 9:47 am
by DAN SEA
Thank you very much, Julien, for such a comprehensive answer!
Everything worked out!