JSFiddle - React, Tailwind, and code Playground

by denvut

HTML

<table class="traffic_report report_table ubdir-list" data-url="/ui/inventory/ub/traffic_report/data">
<thead>
  <tr>
    <th class="ID" rowspan="2">ID</th>
    <th class="Group" rowspan="2">Group</th>
    <th class="Name" rowspan="2">Name</th>
    <th colspan="10">07 Nov 2016 - 09 Nov 2016</th>
    <th colspan="3">Since service started</th>
    <th class="RefreshedAt" rowspan="2">Refreshed At</th>
    <th class="Version" rowspan="2">Version</th>
    <th class="Model" rowspan="2">Model</th>
  </tr>
  <tr>
    <th class="Stats">Total In, Mbps</th>
    <th class="Stats">Cacheable, Mbps</th>
    <th class="Stats">% That Is Cacheable</th>
    <th class="Stats">Cache Out, Mbps</th>
    <th class="Stats">Max Cache Productivity</th>
    <th class="Stats">Average Cache Productivity</th>
    <th class="Stats">Max Byte Hit Ratio</th>
    <th class="Stats">Average Byte Hit Ratio</th>
    <th class="Stats">Cache Out % Of Total</th>
    <th class="Stats">Web Request Hit Ratio</th>
    <th class="Stats">IPs Seen</th>
    <th class="Stats">IPs Served</th>
    <th class="Stats">% IPs Served</th>
  </tr>
</thead>
<tbody><tr class="">
      
        <td>2</td>
      
        <td>Network</td>
      
        <td>3_level_group_EP - ep1</td>
      
        <td>0.0</td>
      
        <td>0.0</td>
      
        <td>0.0</td>
      
        <td>0.0</td>
      
        <td>N/A</td>
      
        <td>N/A</td>
      
        <td>N/A</td>
      
        <td>N/A</td>
      
        <td>0.0</td>
      
        <td>0.0</td>
      
        <td>1</td>
      
        <td>1</td>
      
        <td>100.0</td>
      
        <td>16 Nov 2016 09:07:01</td>
      
        <td>5.6.0-VMb59</td>
      
        <td>UB6000-EP</td>
      
    </tr>
  
    <tr class="ubd-oddrow">
      
        <td>4</td>
      
        <td>Network</td>
      
        <td>N+K DUMNED SYSTEM 0.52</td>
      
        <td>N/A</td>
      
        <td>0.0</td>
      
        <td>N/A</td>
      
        <td>0.0</td>
      
       ...

CSS

div {height:150px; width:150px; display:block; overflow:hidden; outline: 2px solid #777777; padding:20px;}
img {width:150px;}
button {font-size:10px; margin:10px;}

JavaScript

$(document).ready(function(){
 // Сбрасываем размер шрифта
 var originalFontSize = $('.traffic_report').css('font-size');
  $(".resetFont").click(function(){
  $('.traffic_report').css('font-size', originalFontSize);
 });
 // Увеличиваем размер шрифта
 $(".zoomin").click(function(){
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.2;
  $('.traffic_report').css('font-size', newFontSize);
  return false;
 });
 // Уменьшаем размер шрифта
 $(".zoomout").click(function(){
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.8;
  $('.traffic_report').css('font-size', newFontSize);
  return false;
 });
});