I have created a size chart for a product using Table Press plugin for Wordpress. Then I create a pop using pop maker plugin and add the Table to it. Then I add the pop up as a link on Single Product page of my site.

It works very well on desktop site and android phones. Here's how it looks on android phones:

And here's how it looks on phones:

There is some CSS that I can apply to the Tables directly via Table press plugin and I have added code to handle CSS for devices. Here's the CSS:

/* General TablePress styles for all devices */
.tablepress {
    border-collapse: collapse;
    width: 100%;
}

.tablepress th,
.tablepress td {
    border: 1px solid #ddd;
    padding: 8px;
    font-size: 12px;
    text-align: center;
}

.tablepress thead th {
    background-color: #f2f2f2;
}

/* Mobile-specific TablePress styles */
@media (max-width: 768px) {
    .tablepress {
        overflow-x: auto;
        display: block;
    }

    .tablepress th,
    .tablepress td {
        font-size: clamp(8px,2.5vw,12px); /* Responsive font size */
        padding: 3px;
        white-space: nowrap;
    }
}

/* Additional styling enhancements */
.tablepress tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Zebra striping */
}

.tablepress tbody tr:hover {
    background-color: #e0e0e0; /* Hover effect */
}


@media (max-width: 480px) {
    .tablepress th,
    .tablepress td {
        padding: 3px; /* Further reduce padding on very small screens */
    }/*
            Since we are dealing with a size chart the third column is most likely
            centimeters, so we will not hide it.
          */
    /*
          .tablepress th:nth-child(3),
          .tablepress td:nth-child(3) {
            display: none;
          }
          */
    
}


.tablepress .highlighted-column {
    background-color: #e8f5e9; /* Light green background for highlighted column */
    font-weight: bold;
}

.tablepress thead th {
    font-weight: bold;
    color: #333;
    padding: 5px;
}

HTML for Table:

<table id="tablepress-sampoorna" class="tablepress tablepress-id-sampoorna">
<caption style="caption-side:bottom;text-align:left;border:none;background:none;margin:0;padding:0;"><a href=".php?page=tablepress&amp;action=edit&amp;table_id=sampoorna" rel="nofollow">Edit</a></caption>
<thead>
<tr class="row-1">
    <th class="column-1"></th><th colspan="2" class="column-2">BUST</th><th colspan="2" class="column-4">WAIST</th><th colspan="2" class="column-6">HIPS</th>
</tr>
</thead>
<tbody class="row-striping row-hover">
<tr class="row-2">
    <td class="column-1"></td><td class="column-2">inches</td><td class="column-3">cms</td><td class="column-4">inches</td><td class="column-5">cms</td><td class="column-6">inches</td><td class="column-7">cms</td>
</tr>
<tr class="row-3">
    <td class="column-1">S</td><td class="column-2">35.6</td><td class="column-3">90.5</td><td class="column-4">28.5</td><td class="column-5">72.5</td><td class="column-6">33.3</td><td class="column-7">84.5</td>
</tr>
<tr class="row-4">
    <td class="column-1">M</td><td class="column-2">36.6</td><td class="column-3">93</td><td class="column-4">29.5</td><td class="column-5">75</td><td class="column-6">34.3</td><td class="column-7">87</td>
</tr>
<tr class="row-5">
    <td class="column-1">L</td><td class="column-2">37.6</td><td class="column-3">95.5</td><td class="column-4">30.5</td><td class="column-5">77.5</td><td class="column-6">35.2</td><td class="column-7">89.5</td>
</tr>
<tr class="row-6">
    <td class="column-1">XL</td><td class="column-2">38.6</td><td class="column-3">98</td><td class="column-4">31.5</td><td class="column-5">80</td><td class="column-6">36.2</td><td class="column-7">92</td>
</tr>
<tr class="row-7">
    <td class="column-1">XXL</td><td class="column-2">39.6</td><td class="column-3">100.5</td><td class="column-4">32.5</td><td class="column-5">82.5</td><td class="column-6">37.2</td><td class="column-7">94.5</td>
</tr>
<tr class="row-8">
    <td class="column-1">XXXL</td><td class="column-2">40.6</td><td class="column-3">103</td><td class="column-4">33.5</td><td class="column-5">85</td><td class="column-6">38.2</td><td class="column-7">97</td>
</tr>
</tbody>
</table>

Can someone help me to make the Table on iPhone look similar to the one on android?