Table styles in CSS (last child)

Questions about XML that are not covered by the other forums should go here.
anna_craneo
Posts: 30
Joined: Tue Feb 20, 2018 2:51 pm

Table styles in CSS (last child)

Post by anna_craneo » Tue Feb 20, 2018 2:56 pm

Hi all,

It's been a week since I started using CSS for Oxygen XML and I face problems with styling last row of my tables.
That's how they look now. But no padding is applied to the last row.

Code: Select all

/*
* Deal with @rowsep and @colsep.
*
* These attributes can be set on "table", "tgroup", "row", and
* "entry" elements. The "tbody"/"thead" do not have such attributes.
*
* The values are inherited from the parents. The last row does
* not have a row separator, and the cells from the last column do
* not have column separators.
*/

*[class~="topic/table"][rowsep = '1']> *[class~="topic/tgroup"]:not([rowsep]) > * > *[class~="topic/row"]:not([rowsep]):not(:last-child) > *[class~="topic/entry"]:not([rowsep]),
*[class~="topic/tgroup"][rowsep = '1'] > * > *[class~="topic/row"]:not([rowsep]):not(:last-child) > *[class~="topic/entry"]:not([rowsep]),
*[class~="topic/row"][rowsep = '1']:not(:last-child) > *[class~="topic/entry"]:not([rowsep]),
*[class~="topic/row"]:not(:last-child) > *[class~="topic/entry"][rowsep = '1']{
border-bottom:1px solid #C7EADE;
padding: 10px;
}

/* Add a line between the header and the table body, if there is a rowsep on the table or tgroup */
*[class~="topic/table" ][rowsep = '1'] > *[class~="topic/tgroup"] > *[class~="topic/thead"] > *[class~="topic/row"]:last-child > *[class~="topic/entry"],
*[class~="topic/tgroup"][rowsep = '1'] > *[class~="topic/thead"] > *[class~="topic/row"]:last-child > *[class~="topic/entry"][rowsep = '1'] {
border-bottom:1px solid #C7EADE;
padding: 10px 10px;
}

*[class~="topic/table"][colsep = '1'] > *[class~="topic/tgroup"]:not([colsep]) > * > *[class~="topic/row"]:not([colsep]) > *[class~="topic/entry"]:not([colsep]):not(:last-child),
*[class~="topic/tgroup"][colsep = '1'] > * > *[class~="topic/row"]:not([colsep]) > *[class~="topic/entry"]:not([colsep]):not(:last-child),
*[class~="topic/row"][colsep = '1'] > *[class~="topic/entry"]:not([colsep]):not(:last-child),
*[class~="topic/entry"][colsep = '1']:not(:last-child){
border-right:1px solid #C7EADE;
padding: 10px 10px;
}

*[class~="topic/table" ][colsep = '1'] > *[class~="topic/tgroup"] > *[class~="topic/thead"] > *[class~="topic/row"]:last-child > *[class~="topic/entry"],
*[class~="topic/tgroup"][colsep = '1'] > *[class~="topic/thead"] > *[class~="topic/row"]:last-child > *[class~="topic/entry"][colsep = '1'] {
border-bottom:1px solid #C7EADE;
padding: 10px 10px;
}
Thanks for help in advance!

Radu
Posts: 6589
Joined: Fri Jul 09, 2004 5:18 pm

Re: Table styles in CSS (last child)

Post by Radu » Tue Feb 20, 2018 4:05 pm

Hi Anna,

And are you using the CSS to style how the content looks like in the Author visual editing mode or are you using it to style the PDF output obtained from DITA content using the CSS-based DITA Map PDF - WYSIWYG transformation scenario?

Regards,
Radu
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com

anna_craneo
Posts: 30
Joined: Tue Feb 20, 2018 2:51 pm

Re: Table styles in CSS (last child)

Post by anna_craneo » Tue Feb 20, 2018 8:19 pm

Radu wrote:Hi Anna,

And are you using the CSS to style how the content looks like in the Author visual editing mode or are you using it to style the PDF output obtained from DITA content using the CSS-based DITA Map PDF - WYSIWYG transformation scenario?

Regards,
Radu
Hi Radu,

I'm using CSS-based DITA Map PDF - WYSIWYG transformation scenario.

Dan
Posts: 431
Joined: Mon Feb 03, 2003 10:56 am

Re: Table styles in CSS (last child)

Post by Dan » Thu Feb 22, 2018 12:41 pm

The CSS selectors from your code sample are matching cells that are at the upper or left side of a separator.

In my tests I see only the last cell from the last row having no padding - this is because my table has rowsep and colseps on all rows and cells. I think you simply need to add a fallback CSS rule:

Code: Select all


*[class ~= "topic/entry"] {
padding: 10px;
}
Regards,
Dan

Post Reply