JSFiddle - React, Tailwind, and code Playground

by DelphinPRO

HTML

<table>
  <tr>
    <td>Table1</td>
    <td>Table1</td>
    <td>Table1</td>
  </tr>
</table>
<table>
  <tr>
    <td>Table1</td>
    <td>Table1</td>
    <td>Table1</td>
  </tr>
</table>
<table>
  <tr>
    <td>Table1</td>
    <td>Table1</td>
    <td>Table1</td>
  </tr>
</table>

CSS

table {
  color: black;
  border: 1px solid;
  margin: 1rem;
}

td {
  border: 1px solid;
}

div {
  color: red;
  border: 5px solid;
  margin: 1rem;
}

div::before {
  content: 'Div вокруг таблицы'
}

div>table {
  margin: 0;
}

JavaScript

let tables = document.getElementsByTagName('table'),
  length = tables.length,
  i, wrapper;
for (i = 0; i < length; i++) {
  wrapper = document.createElement('div');
  wrapper.setAttribute('class', 'classname');
  tables[i].parentNode.insertBefore(wrapper, tables[i]);
  wrapper.appendChild(tables[i]);
}