JSFiddle - React, Tailwind, and code Playground

by Hugo M.

HTML

<div>
    (not in #post)
    <table>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
    </table>
</div> 

<div id="post">
    (in #post)
    <table>
        <thead>
          <tr>
            <td>Lorem</td>
            <td>Ipsum</td> 
            <td>dolor</td>
            <td>Lorem</td>
            <td>Ipsum</td> 
            <td>dolor</td>
            <td>Lorem</td>
            <td>Ipsum</td> 
            <td>dolor</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>sit</td>
            <td>amet </td> 
            <td>consectetur</td>
            <td>sit</td>
            <td>amet </td> 
            <td>consectetur</td>
            <td>sit</td>
            <td>amet </td> 
            <td>consectetur</td>
          </tr>
          <tr>
            <td>sit</td>
            <td>amet </td> 
            <td>consectetur</td>
            <td>sit</td>
            <td>amet </td> 
            <td>consectetur</td>
            <td>sit</td>
            <td>amet </td> 
            <td>consectetur</td>
          </tr>
          <tr>
            <td>sit</td>
            <td>amet </td> 
            <td>consectetur</td>
            <td>sit</td>
            <td>amet </td> 
            <td>consectetur</td>
            <td>sit</td>
            <td>amet </td> 
            <td>consectetur</td>
          </tr>
          <tr>
            <td>sit</td>
            <td>amet </td> 
            <td>consectetur</td>
            <td>sit</td>
            <td>amet </td> 
            <td>consectetur</td>
            <td>sit</td>
            <td>amet </td> 
            <td>consectetur</td>
          </tr>
          <tr>
            <td>sit</td>
            <td>amet </td> 
            <td>consectetur</td>
            <td>sit</td>
            <td>amet </td> 
            <td>consectetur</td>
            <td>sit</td>
            <td>amet...

CSS

.table_div {
    background: #CCC;
    width: 300px;
    overflow-x: scroll;
}
.table_div table {
    border-color: red;
}

table {
    margin: 2em 0;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 0.5em;
}

JavaScript

/*
function by http://stackoverflow.com/questions/3387427/remove-element-by-id
*/
Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}
/* */

    var post = document.getElementById('post'),
        tables = post.getElementsByTagName('table');
    
    for(var i=0; i<tables.length; i++) {
        var table = tables[i];
        
        var table_content = table.innerHTML,
            table_div = document.createElement('div');
        
        tables.remove();
            
        table_div.appendChild(table);
        table_div.className = 'table_div';
    }