JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 30px;
color: #333;
background-color: #fff;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.16/r-2.2.1/datatables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/r-2.2.1/datatables.min.js"></script>
<meta charset=utf-8 />
<title>DATA GĂ–STER</title>
</head>
<body>
<div class="container">
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th></th>
<th>NUMBER</th>
<th>CAMPAIGN</th>
<th class="none">PAGES</th>
</tr>
</thead>
<tbody>
<?php foreach ($dataList as $number => $data): ?>
<tr>
<td class="details-control"></td>
<td><?= $number ?></td>
<td><?= 'CAMPAIGN' ?></td>
<td>
<table id="table-<?= $number ?>" class="display nowrap sub_table" width="100%">
<thead>
<tr>
<th>CAMPAIGN</th>
<th>PAGE</th>
<th>TIME</th>
</tr>
</thead>
<tbody>
<?php foreach ($data as $page): ?>
<tr>
<td><?= $page['campaign'] ?></td>
<td><?= $page['page'] ?></td>
<td><?= $page['timePage'] ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<script>
const tableList = [];
$(document).ready(function() {
let table = $('#example').DataTable({
responsive:...