Printing a DIV that contains a table.

  • Resolved tvk5300

    (@tvk5300)


    5 years, 9 months ago

    On this page [ redundant link removed ] is a selectionbox to select a week ( –Kies e gewenste week–) and after a week is selected (<select name=”myselection” id=”myselection” onchange=’this.form.submit()’>>) a DIV (id=”myDIV”) a table shows up with CCS style: .table { width: auto; padding: 10px; font-size: 14px; font-weight: bolder; border: 1px solid #336600; }
    The table on the page is correct.

    After the table is: [print-me alt=”Deze tabel afdrukken” target=”#myDIV”/], but the printed table has not the CSS layout; no border is printed,

    How can I solve this please?

    • This topic was modified 5 years, 9 months ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor twinpictures

    (@twinpictures)

    The CSS that is defined for myDIV is not in your theme’s style.css file, but directly on the index page:

    #myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightgreen;
    margin-top: 20px;
}

    This CSS will need to be manually added to the print page.
    Lucky for you, there is a section in the Print-O-Matic options that does exactly this under:
    Dashboard > Settings > Print-O-Matic > Print Page CSS

    Thread Starter tvk5300

    (@tvk5300)

    Thanks,

    Because of ‘text-align: center;’ the printing has improved, but I am still missing the table-border.
    Adding also the table style seems to have no effect?

    Plugin Contributor twinpictures

    (@twinpictures)

    You should look into how to inspect elements on your browser.
    By inspecting the table, we see that the CSS for the table is defined in this file

    Rather than include all that css just for the table, you can simply add the missing CSS to the print page CSS section:

    .su-table table {
    min-width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    font-size: 1em !important;
    border: 1px solid #ccc !important;
}
    Thread Starter tvk5300

    (@tvk5300)

    Now I have in the section: ‘Custom Print Page Style’:

    #myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightgreen;
    margin-top: 20px;
    }
    .su-table table {
    min-width: 100% !important;
    margin: 0 !important;
    border: 2px solid #000000 !important;
    }
    .su-table table td {
    padding: .5em 1em !important;
    border: 1px solid #000 !important;
    background: #fff !important;
    }

    And with this changes, the printing is what I want.

    Many thanks for your help!

    Case closed!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Printing a DIV that contains a table.’ is closed to new replies.

Tags