JSFiddle - React, Tailwind, and code Playground

by Taleeb Anwar

HTML

<button id="print-button" class="hide">Print</button>
<table>
  <thead>
    <tr>
      <th>
        <div>
          <p>Header 1</p>
          <p>Header 2</p>
          <p>Header 3</p>
          <p>Header 4</p>
          <p>Header 5</p>
          <p>Header 6</p>
          <p>Header 7</p>
        </div>
      </th>
    </tr>
    <tr>
      <th>&nbsp;</th>
    </tr>
    <tr>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test Print</p>
        <p>Lorum Ipsum Test...

CSS

@media print {
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
  .hide {
    display: none;
  }
}

@media screen {
  @page {
    margin-top: 0px;
  }
}

JavaScript

$("#print-button").click(function() {
  //$("#print-button").addClass("hide");
  window.print();
  //$("#print-button").removeClass("hide");
});