StackOverflow #52010444 ver2

by MatrixTai

HTML

<body>
  <div>
    <a href="#" onClick="window.print();">Print</a>
  </div>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th colspan="3">Results</th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
        </tr>
      </thead>
      <tbody>
        <tr class="printing-thead">
          <td colspan="3">Results</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td colspan="7" class="section-name">Section - 1</td>
        </tr>
        <tr>
          <td class="data-name" colspan="3">Test - 1</td>
          <td class="data-point">37.88</td>
          <td class="data-point">87.43</td>
          <td class="data-point">52.36</td>
        </tr>
        <tr>
          <td class="data-name" colspan="3">Test - 2</td>
          <td class="data-point">64.16</td>
          <td class="data-point"></td>
          <td class="data-point"></td>
        </tr>
        <tr>
          <td class="data-name" colspan="3">Test - 3</td>
          <td class="data-point">77.95</td>
          <td class="data-point">78.61</td>
          <td class="data-point">43.79</td>
        </tr>
        <tr>
          <td class="data-name" colspan="3">Test - 4</td>
          <td class="data-point">66.64</td>
          <td class="data-point">48.12</td>
          <td class="data-point">74.40</td>
        </tr>
        <tr>
          <td class="data-name" colspan="3">Test - 5</td>
          <td class="data-point">78.51</td>
          <td class="data-point">98.21</td>
          <td class="data-point">31.64</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td colspan="7" class="section-name">Section - 2</td>
        </tr>
        <tr>
          <td class="data-name" colspan="3">Test - 1</td>
          <td class="data-point">55.47</td>
          <td class="data-point">92.80</td>
          <td class="data-point">94.02</td>
        </tr>
        <tr>
          <td class="data-name" colspan="3">Test -...

SCSS

@mixin borders {
    border: 1px solid black;
}

%borders {
    @include borders;
}

table {
    border-spacing: 0;
    table-layout: fixed;
    th {
        text-align: center;
    }

    tr {
        th{
            @extend %borders;
        }

        td {
            @extend %borders;
            &.data-name {
                padding: 3px 100px 3px 3px;
            }

            &.data-point {
                text-align: center;
                padding: 3px 10px;
            }

            &.section-name {
                background-color: #999;
            }
        }
    }
    
    tr.printing-thead{
      display:none;
      
    }
}

@media print {
  
    thead {
      display:none;
    }
    
    tbody {
      display:block;
      
      tr.printing-thead{
        display:contents;
        font-weight:bold;
        text-align:center;
      }
    }
    .pagebreak {
        height:0px;
        break-before: always !important;
        page-break-before: always !important;
        page-break-inside: avoid !important;
        
        td{
          display:none;
        }
    }
}