JSFiddle - React, Tailwind, and code Playground

HTML

<div id="maincol">
    <table>
    <caption>2009 Employee Sales by Department</caption>
    <thead>
      <tr>
        <td></td>
        <th scope="col">food</th>
        <th scope="col">auto</th>
        <th scope="col">household</th>
        <th scope="col">furniture</th>
        <th scope="col">kitchen</th>
        <th scope="col">bath</th>
        <th scope="col">flooring</th>
        <th scope="col">plumbing</th>
        <th scope="col">electrical</th>
        <th scope="col">hardware</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Mary</th>
        <td>190</td>
        <td>160</td>
        <td>40</td>
        <td>120</td>
        <td>30</td>
        <td>70</td>
        <td>40</td>
        <td>120</td>
        <td>30</td>
        <td>70</td>
      </tr>
      <tr>
        <th scope="row">Tom</th>
        <td>3</td>
        <td>40</td>
        <td>30</td>
        <td>45</td>
        <td>35</td>
        <td>49</td>
        <td>30</td>
        <td>45</td>
        <td>35</td>
        <td>49</td>
      </tr>
      <tr>
        <th scope="row">Brad</th>
        <td>10</td>
        <td>180</td>
        <td>10</td>
        <td>85</td>
        <td>25</td>
        <td>79</td>
        <td>10</td>
        <td>85</td>
        <td>25</td>
        <td>79</td>
      </tr>
      <tr>
        <th scope="row">Kate</th>
        <td>40</td>
        <td>80</td>
        <td>90</td>
        <td>25</td>
        <td>15</td>
        <td>119</td>
        <td>40</td>
        <td>80</td>
        <td>90</td>
        <td>25</td>
      </tr>  
      <tr>
        <th scope="row">Donald</th>
        <td>45</td>
        <td>35</td>
        <td>49</td>
        <td>30</td>
        <td>3</td>
        <td>40</td>
        <td>30</td>
        <td>45</td>
        <td>35</td>
        <td>49</td>
      </tr>
      <tr>
        <th scope="row">Mark</th>
        <td>49</td>
        <td>30</td>
        <td>3</td>
        <td>40</td>
        <td>30</td>
        <td>45</td>
    ...

CSS

#maincol {width:500px;}

th {background:#ccc;}
caption, th, td {padding:5px; text-align:center;}
th, td {border:1px solid #ddd}

.overlay {
     position: fixed;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:left;
     z-index: 1000;
     background:#fff;
     background:rgba(255,255,255,0.9);
     padding:10px;
     overflow:scroll;
}
a.closemodal {float:left;}

.modaltable {
    position: relative;
    width:100%;
    cursor:pointer;  
    border:1px solid #5aa1d8;
    background:#fff;
    background:rgba(255,255,255,0.9);
}
.modaltable:before {
    content: "Oversize Table: Click to View";
    position: absolute;
    display:block;
    max-width: 100%;
    max-height: 100%;
    color: #2489d6;
    font-weight: bold;
    font-size: 1.4em;
    padding-left:5px;
    text-align: left;
    vertical-align: middle;
    z-index: 100;
}

.modaltable img {display:none;}
.modaltable th,
.modaltable td {
    font-size: 0.6em;
    padding: 0;
    height: 7px;
    background:#fff;
    background:rgba(255,255,255,0.9);
    border:none;
    color:#ddd;
}

JavaScript

jQuery(document).ready(function(){
    var colwidth = jQuery('#maincol').width();
    jQuery('table').each(function(){
        if (jQuery(this).width() > colwidth) {jQuery(this).addClass('modaltable');}
    });
    jQuery('#maincol').on('click', 'table.modaltable', function() {
        var overlay = '<div class="overlay"><table>' + jQuery(this).html() + '</table><br/><a class="closemodal button" href="#" title="Close this overlay">Close</a></div>';
        jQuery('body').append(overlay);
    });
    jQuery('body').on('click', 'a.closemodal', function(e) {
        e.preventDefault();
        jQuery('div.overlay').remove();
    });
});