Table styles in CSS (last child)

[anna_craneo]

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]

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

[anna_craneo]

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]

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