How to Target CSS Table Format in PDF?

John Lawson commented on Nov 3, 2017

Hey Folks!

I'm using KoolReports to generate data reports from a mysql database and then exporting them to PDF. Imagine that!

When formatting my pdfs, I'd like to target the tables using "table-striped".

I have two views set up, one for the web and one for the pdf. I have one css stylesheet I am drawing on for both.

I can successfully used "table-stripped" in the web view, but the moment I try to use it in the pdf view, the table doesn't format with alternating colors! I can successfully target all other formatting elements for the entire PDF (header, background color, etc.), but I can't target any element of the table itself.

What am I doing wrong? What am I not doing at all?

My pdf view code:

                    <?php
                    Table::create(array(
                        "dataStore"=>$this->dataStore("locationAll"),
                        "columns"=>array(
                            "Physical Location",
                            "NewPhysicalLocation",
                            "Site"
                        ),
                        "cssClass"=>array(
                            "table"=>"table-striped",
                            "th"=>"tbHeader",
                            "tr"=>"tbRow"
                       )
                    ));
                    ?>

My css code:

.tbRow {
  background-color:#bfdeff;
}

.tbHeader {
  background-color:#2f73b7 !important;
}

KoolReport commented on Nov 3, 2017

It is because of default Bootstrap CSS for @media print, you can fix the table-striped with following css:

    <style rel="stylesheet">
        @media print
        {
            .table-striped > tbody > tr:nth-of-type(odd) > td {
                background-color: #f9f9f9 !important;
            }
        }
    </style>

Hope that helps.

John Lawson commented on Nov 3, 2017

Hi! I embedded that code in my css and it worked excellently. Thank you!

But I'm having trouble targeting any other elements of the table. The following is what I'm trying now.

@media print
{
/*this is working great! Yay!*/
    .table-striped > tbody > tr:nth-of-type(odd) > td {
        background-color: #bfdeff !important;
    }

/*table header color change. This isn't working yet*/
    .table-striped > tbody > th {
      background-color:#216eb7 !important;
    }
    
/*trying to avoaid pdf page breask inside table rows. This isn't working yet*/
    .table-striped > tbody > tr > td {
        page-break-inside:avoid !important;
        page-break-after:auto !important;
    }
}

I'm sorry if I'm missing something really obvious. I'm pretty new to css.

KoolReport commented on Nov 5, 2017

You do this:

    .table > thead > th {
      background-color:#216eb7 !important;
    }
    
    .table {
        page-break-inside:avoid !important;
        page-break-after:auto !important;
    }

Let me know if it works.

KoolReport's Forum

How to Target CSS Table Format in PDF? #144

Build Your Excellent Data Report