JSFiddle - React, Tailwind, and code Playground

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

var post = document.getElementById('post'),
        tables = post.getElementsByTagName('table');

    for(var i=0; i<tables.length; i++) {
        var table = tables[i];
        
        var elem = document.createElement('div');
        elem.className = 'table_div';
        
        post.replaceChild(elem, table);
    
        elem.appendChild(table);
    }