[Resolved] Normal table and table press table non responsive on mobile

[Rohan Verma]

We use table press and normal tables from classic editor. When we go through some posts which have those table, we noticed that the tables are not responsive and kind of break the post layout. I have shared the link of the normal table post

Please share some solution

[Leo]

Hi there,

Unfortunately tables are not responsive by default.

Are the tables from TablePress responsive?

If so the best solution would be to convert them all to TablePress.

[mikeb82]

If you’re interested, I can post code for a responsive table.

Here is the table on one of my dev sites.

https://www.gonzowebdesign.com/table-test/

I did this originally for a golf course client, but I use it more for things like seminar agendas where you have headings like time, topic, speaker, etc.

[Rohan Verma]

Hello Leo but the voice theme (which we were using before) managed to auto adjust the boxes.

[Leo]

That means the other theme decided to add responsive CSS to tables – every theme does it differently.

Tables are not generally used amongst our users so we decided to leave to plugins when users need it.

Do you like Mike’s style? Maybe you can try his code?

[mikeb82]

Here’s a responsive table setup that all are free to use. Of course you will need to adjust the CSS to your needs. This was originally written for a content area 800px wide.

The CSS:

 /* Responsive Table  */

.gtable {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 760px;
  font-family: Helvertica, sans-serif;
}

.gtable caption {
  font-size: 1.25em;
  margin: .5em .75em;
  max-width: 92px;
}

.gtable tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

.gtable th,
.gtable td {
  padding: .5em;
  text-align: center;
}

.gtable th {
  font-size: .78em;
  letter-spacing: .1em;
  text-transform: uppercase;
  min-width: 6em;
}
.gtable td {
font-size: .78em;
font-weight: normal;
}

@media screen and (max-width: 678px) {
  .gtable {
    border: 0;
  }

  .gtable caption {
    font-size: 1.3em;
  }

  .gtable thead {
    border: none;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .gtable tr {
    border-bottom: 3px solid #F68646;
    display: block;
    margin-bottom: .625em;
  }

  .gtable td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }

  .gtable td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  .gtable td:last-child {
    border-bottom: 0;
  }
}

The HTML:

<div style="margin: 1.5em auto; max-width: 750px;">

<table class="gtable">
  <thead>
    <tr>
      <th scope="col">Tee Name</th>
      <th scope="col">Length</th>
      <th scope="col">Gender</th>
      <th scope="col">USGA Course Rating&trade;/Slope Rating</th>
      <th scope="col">Front Nine</th>
      <th scope="col">Back Nine</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Tee Name">Green</td>
      <td data-label="Length">7116</td>
      <td data-label="Gender">Men</td>
      <td data-label="USGA&trade; Course Rating/Slope Rating">72.3/139</td>
      <td data-label="Front Nine">36.7/136</td>
      <td data-label="Back Nine">37.6/141</td>
    </tr>
    <tr>
      <td data-label="Tee Name">Blue</td>
      <td data-label="Length">6618</td>
      <td data-label="Gender">Men</td>
      <td data-label="USGA&trade; Course Rating/Slope Rating">72.0/134</td>
      <td data-label="Front Nine">35.5/131</td>
      <td data-label="Back Nine">36.5/137</td>
    </tr>
    <tr>
      <td data-label="Tee Name">Gold</td>
      <td data-label="Length">5957</td>
      <td data-label="Gender">Men</td>
      <td data-label="USGA&trade; Course Rating/Slope Rating">69.0/121</td>
      <td data-label="Front Nine">33.8/119</td>
      <td data-label="Back Nine">35.2/122</td>
    </tr>
     <tr>
      <td data-label="Tee Name">Silver</td>
      <td data-label="Length">5379</td>
      <td data-label="Gender">Men</td>
      <td data-label="USGA&trade; Course Rating/Slope Rating">66.3/113</td>
      <td data-label="Front Nine">32.7/107</td>
      <td data-label="Back Nine">33.6/118</td>
    </tr>
    <tr>
      <td data-label="Tee Name">Gold</td>
      <td data-label="Length">5957</td>
      <td data-label="Gender">Women</td>
      <td data-label="USGA&trade; Course Rating/Slope Rating">74.4/135</td>
      <td data-label="Front Nine">36.6/128</td>
      <td data-label="Back Nine">37.8/141</td>
    </tr>
    <tr>
      <td data-label="Tee Name">Silver</td>
      <td data-label="Length">5379</td>
      <td data-label="Gender">Women</td>
      <td data-label="USGA&trade; Course Rating/Slope Rating">74.4/125</td>
      <td data-label="Front Nine">35.0/121</td>
      <td data-label="Back Nine">36.4/129</td>
    </tr>
     <tr>
      <td data-label="Tee Name">Orange</td>
      <td data-label="Length">4379</td>
      <td data-label="Gender">Women</td>
      <td data-label="USGA&trade; Course Rating/Slope Rating">65.6/113</td>
      <td data-label="Front Nine">32.5/110</td>
      <td data-label="Back Nine">33.1/116</td>
    </tr>
  </tbody>
 </table>
</div>

[Rohan Verma]

Thanks, Leo for the reply and Thanks Mike for the code. I will try out this for sure. Thanks again. Awesome community.

[Rohan Verma]

I am now using a plugin to make the table responsive. If anyone needs this in future, here is the plugin link: https://wordpress.org/plugins/make-tables-responsive/

Thanks and Regards

[Leo]

Thanks for sharing!

[Author]

Posts