CODEWITHSUNDEEP
htmlcssfirefoxprintinghtml-table
Dennis
Dennis

Reputation: 8111

Firefox does not print table borders on pages 2 and onwards

Problem:

When printing a table on Mozilla Firefox (version 55.0.3 32bit), table borders show on the first page only, but not on any of the subsequent pages.

So, i.e. printing pages 2 only does not print table borders, but printing page 1 only prints table borders.

This question did not help: https://webmasters.stackexchange.com/questions/2578/how-to-prevent-table-borders-from-disappearing-while-printing (borders are still not printing on page 2 and onwards, after inserting accepted answer's CSS into my page)

This is what I have:

<table class="listdb">...</table>

table.listdb {
  font-size: 10pt;
  border-width: 0px 0px 0px 0px;
  border-spacing: 0px;
  border-style: none;
  border-color: #000000;
  border-collapse: collapse;
  background-color: #FFFFFF;
}

table.listdb th {
  font-size: 10pt;
  border-width: 1px;
  padding: 1px 5px 1px 5px;
  border-style: solid;
  border-color: #000000;
  background-color: #7A99DD;
  color: #000000;
  vertical-align: top;
}

table.listdb td {
  font-size: 10pt;
  border-width: 1px;
  padding: 1px 5px 1px 5px;
  border-style: solid;
  border-color: #999999;
  border-color: #000000;
  vertical-align: top;
}

I also tried using HTML5 Boilerplate's CSS below - didn't help (showing relevant excerpt here, when I used entire @media print block)

@media print {
    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }    
}

Upvotes: 1

Views: 5303

Answers (4)

adel parsa
adel parsa

Reputation: 454

I solved this problem with this solution:
check the browser and if it's Firefox, use different border width

in my case i wrote below code to check browser name:

let pageStyle = '';
const isFirefox =  window.navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
  if(isFirefox) {
    pageStyle += `
    .datasheet-report td {
      border: 2px solid #444 !important;
    }
    `;
  }

now set the generated style to your page

Upvotes: 1

Kęstutis
Kęstutis

Reputation: 79

This is a Firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=1394249 Bug is also reproducible on 71.0 (64 bit) Ubuntu 18.04.

Upvotes: 0

GDB
GDB

Reputation: 37

Good solution by @Dennis.
To take away the space between the table outer border and the cells, I added:

table.listdb {
  border-collapse: unset; 
  padding 0;
}

Upvotes: 1

Dennis
Dennis

Reputation: 8111

This worked

<style>
<!--
@media print {
    table.listdb {
        border-collapse: unset;
    }
}
-->
</style>

where listdb class was used in my table <table class="listdb">...</table>

Upvotes: 0

Related Questions