even-odd table row colors don't work with spanned rows

markgif commented 8 years ago

I'm using Antenna House. I'm creating even-odd alternate-colored table rows by using ordinary nth-child CSS like this:

*[class~="topic/row"]:nth-child(even){ background: #DDEEFF; }

This works in the PDF. And row and columns spans work because of the fix in issue #10.

But when I combine table spans with even-odd CSS table row colors, the rows are rendered wrong. The colored row goes all the way across the row, without respecting the spanned rows. See dita-test.pdf.

dita-test.pdf

But Antenna House does this correctly with HTML/CSS to PDF. See html-test.pdf.

html-test.pdf

Any ideas?

I'm wondering if all this would be easier if I were using CSS on HTML instead of DITA XML.

Thanks, Mark

dan-caprioara commented 8 years ago

Your selector works fine for me. I put it in the "-colors.css" file, and then transformed with Prince and Antenna House:

even-odd.pdf

I recommend using background-color instead of background if you intend to see the effect in the editor. (oXygen does not expand the background shorthand)

The topic was:

        <?xml version='1.0' encoding='UTF-8'?>
        <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "http://docs.oasis-open.org/dita/v1.1/OS/dtd/topic.dtd"
        >
        <topic id="introduction">
            <title>Even/Odd Coloring in Tables</title>
            <body>
            <p>
              <table frame="all" rowsep="1" colsep="1" id="table_ykp_yjl_c5">
                <title>MyTable</title>
                <tgroup cols="3">
                  <colspec colname="c1" colnum="1" colwidth="1.0*"/>
                  <colspec colname="c2" colnum="2" colwidth="1.0*"/>
                  <colspec colname="newCol3" colnum="3" colwidth="1*"/>
                  <thead>
                    <row>
                      <entry/>
                      <entry>2</entry>
                      <entry>3</entry>
                    </row>
                  </thead>
                  <tbody>
                    <row>
                      <entry>1</entry>
                      <entry>2</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry morerows="1">Spans down</entry>
                      <entry>2</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>2</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>1</entry>
                      <entry>2</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry morerows="1">Spans down</entry>
                      <entry>2</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>2</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>1</entry>
                      <entry>2</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>1</entry>
                      <entry>2</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry morerows="1">Spans down</entry>
                      <entry>2</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>2</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>1</entry>
                      <entry>2</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>1</entry>
                      <entry>2</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>1</entry>
                      <entry morerows="1">Spans down</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>1</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>1</entry>
                      <entry/>
                      <entry/>
                    </row>
                    <row>
                      <entry>1</entry>
                      <entry morerows="1">Spans down</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>1</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>1</entry>
                      <entry/>
                      <entry/>
                    </row>
                    <row>
                      <entry>1</entry>
                      <entry>2</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>1</entry>
                      <entry>2</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>1</entry>
                      <entry>2</entry>
                      <entry/>
                    </row>
                    <row>
                      <entry>1</entry>
                      <entry>2</entry>
                      <entry/>
                    </row>
                  </tbody>
                </tgroup>
              </table>
            </p>
          </body>
        </topic>

markgif commented 8 years ago

At first it didn't work, but then I tried that one CSS change in -colors.css with a fresh copy of the dita-css plugin, and it works nicely. So thanks!

This notifies me that something I did in my custom CSS earlier broke this capability.

oxygenxml / dita-ot-css-pdf

even-odd table row colors don't work with spanned rows #11