Table Press plugin not applying CSS for mobile
14:08 19 Mar 2025

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:

enter image description here

And here's how it looks on phones:

enter image description here

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;
}

  Edit
  
    

      
      BUST
      WAIST
      HIPS
    

  
  
    

      
      inches
      cms
      inches
      cms
      inches
      cms
    

    

      S
      35.6
      90.5
      28.5
      72.5
      33.3
      84.5
    

    

      M
      36.6
      93
      29.5
      75
      34.3
      87
    

    

      L
      37.6
      95.5
      30.5
      77.5
      35.2
      89.5
    

    

      XL
      38.6
      98
      31.5
      80
      36.2
      92
    

    

      XXL
      39.6
      100.5
      32.5
      82.5
      37.2
      94.5
    

    

      XXXL
      40.6
      103
      33.5
      85
      38.2
      97

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

html css wordpress e-commerce tablepress