JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<canvas>
<table id="tablerecords">
<tr background-color="#ff6600"><th></th><th></th><th></th><th></th></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</table></canvas>
<div id="print">Print</div>

CSS

@page {
        size: A4;
        margin: 0;
    }
@media print {
  * { color: black; background: #ff0000; }
}
          #tablerecords {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
          }

          #tablerecords td, #tablerecords th {
            border: 1px solid #ddd;
            padding: 8px;
            background-color: #ff0000;
          }

          #tablerecords tr:nth-child(even) {
            background-color: #f2f2f2;
          }

          #tablerecords th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            background-color: Black;
            color: white;
          }
}
    





#tablerecords {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#tablerecords td, #tablerecords th {
  border: 1px solid #ddd;
  padding: 8px;
}

#tablerecords tr:nth-child(even) {
  background-color: #f2f2f2;
}

#tablerecords tr:hover {
  background-color: #ddd;
}

#tablerecords th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: Black;
  color: white;
}

JavaScript

$('#print').on('click', function(){
		window.print();		
})