How to use custom style when printing full-page Tabulator tables

Question

I'm trying to print a Tabulator table using the print() method on the table object.

I need to set custom styling, so I'm setting the second parameter to true. This works in reproducing the styling of the table (with the usual HTML caveats, such as removed backgrounds).

However, I would like to use an entirely different style for printing. I tried to add rules of the following form to the stylesheet:

.tabulator-print-table .tabulator-headers {
    border: black 3px;
}

However, these do not seem to have the desired effect (in the above example, I can't see any border in the printout).

question from:https://stackoverflow.com/questions/65848320/how-to-use-custom-style-when-printing-full-page-tabulator-tables

Answer 1

That is totally possible, but i can see two issues with your current approach.

The first issue is that when doing whole table printing, the table is actually replaced by a standard HTML table because browsers know how to print this better, so only the classes defined in the Print Styling List are available, all other selection should be done using standard table elements, so to style a column header would be:

.tabulator-print-table th{
   //style table column header
}

To style the row containing the table headers would be:

.tabulator-print-table thead tr{
   //style table header row
}

The other issue you may be facing is if you have set the printStyled option to true in the table setup then it will be applying the existing table styles as inline styles to each of the print tables elements, so you may need to use the !important flag to override the inline styles:

border: black 3px !important;