JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table class="style1 table" border="0" >
<thead>
		<tr>
    <th>Name</th>
    <th>Wth</th>
			<th>Jan</th>
			<th>Feb</th>
			<th>Mar</th>
			<th>Apr</th>
			<th>May</th>
			<th>Jun</th>
			<th>Jul</th>
			<th>Aug</th>
			<th>Sep</th>
			<th>Oct</th>
			<th>Nov</th>
			<th>Dec</th>
			<th>Jan</th>
			<th>Feb</th>
			<th>Mar</th>
			<th>Apr</th>
			<th>May</th>
			<th>Jun</th>
			<th>Jul</th>
			<th>Aug</th>
			<th>Sep</th>
			<th>Oct</th>
			<th>Nov</th>
			<th>Dec</th>
      <th>Total</th>
		</tr>
    </thead>
		<tr>
			<th rowspan="2">Batch no 1</th>
			<td class="d">Integer faucibus ornare</td>
			<td class="n">609.68</td>
			<td class="n">380.43</td>
			<td class="n">441.03</td>
			<td class="n">726.00</td>
			<td class="n">434.52</td>
			<td class="n">461.67</td>
			<td class="n">989.78</td>
			<td class="n">939.43</td>
			<td class="n">480.03</td>
			<td class="n">346.53</td>
			<td class="n">276.50</td>
			<td class="n">507.50</td>
			<td class="n">422.00</td>
			<td class="n">998.40</td>
			<td class="n">463.85</td>
			<td class="n">600.59</td>
			<td class="n">230.00</td>
			<td class="n">321.78</td>
			<td class="n">675.69</td>
			<td class="n">491.66</td>
			<td class="n">852.07</td>
			<td class="n">423.11</td>
			<td class="n">518.33</td>
			<td class="n">218.66</td>
			<td class="n">12809.24</td>
		</tr>
		<tr>
			<td class="d">Etiam consequat eros</td>
			<td class="n">519.11</td>
			<td class="n">605.70</td>
			<td class="n">69.65</td>
			<td class="n">93.64</td>
			<td class="n">115.81</td>
			<td class="n">90.07</td>
			<td class="n">883.95</td>
			<td class="n">774.11</td>
			<td class="n">579.04</td>
			<td class="n">965.79</td>
			<td class="n">382.25</td>
			<td class="n">511.21</td>
			<td class="n">484.46</td>
			<td class="n">61.94</td>
			<td class="n">253.79</td>
			<td class="n">329.15</td>
			<td class="n">493.61</td>
			<td...

CSS

.style1 {
			border-collapse: collapse;
		}
		.style1 th {
			background-color: #DDDDDD;
			white-space: nowrap;
		}
    .style1 th,
    .style1 td {
      padding: 8pt;
    }
		.style1 .d {
			white-space: nowrap;
		}
		.style1 .n {
			padding-left: 20px;
			text-align: right;
		}

.sliced-table div {
  display: inline-block;
  overflow: hidden;
}

JavaScript

(function printLayout() {
    'use strict';
    var mediaQueryList = window.matchMedia('print');

    var onBeforePrint = function onBeforePrint() {
        $('.table').each(function sliceTableForPrint(idx, table) {
            var $table = $(table);
            var totalWidthTaken = 0;
            var columns = $table.find('thead th');
            var printOuterWrap = $('<div class="remove-after-print"></div>').insertAfter($table);
            var slicedTable = $('<div class="sliced-table"></div>').appendTo(printOuterWrap);
            var columnWidth;
            var columnSlice;
            columns.each(function addColumnSlice(colIdx, column) {
                columnWidth = column.scrollWidth;
                columnSlice = $('<div></div>').css({
                    width: columnWidth
                }).appendTo(slicedTable);
                $table.clone().removeAttr('id').css({
                    position: 'relative',
                    left: -totalWidthTaken
                }).appendTo(columnSlice);
                totalWidthTaken += columnWidth;
            });
            $table.hide();
        });
    };

    var onAfterPrint = function onAfterPrint() {
        $('.remove-after-print').remove();
        $('.table').show();
    };

    window.onbeforeprint = onBeforePrint;
    window.onafterprint = onAfterPrint;

    mediaQueryList.addListener(function watchMedia(mql) {
        if (mql.matches) {
            onBeforePrint();
        } else {
            onAfterPrint();
        }
    });
}());