How to set custom background fill of the custom row/cell/column - that is not header of the table??

[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!

[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

[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

[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

[DAN SEA]

Thank you very much, Julien, for such a comprehensive answer!
Everything worked out!