Table – make smaller for mobile?

Hey designyvr,

Thank you for the inquiry.

This should be possible if we set the table data to collapse to the next line and if set the table to inherit the width of the view port or browser screen. Please try this code in the Quick CSS field.

@media only screen and (max-width: 767px) {
  .responsive .avia_scrollable_table .avia-data-table > thead > tr > th, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > th, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > th, .responsive .avia_scrollable_table .avia-data-table > thead > tr > td, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > td, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > td {
    white-space: wrap;
  }

  .avia_scrollable_table .avia-table {
    width: 100%;
  }

  .avia-data-table .avia-pricing-row td, .avia-data-table .avia-pricing-row th {
    text-align: center;
    font-size: 18px;
    line-height: 1.3em;
  }
}

Best regards,
Ismael

Hi,

Thank you for the update.

We added an invalid value to the white-space property above. Please look for this css code above.

  .responsive .avia_scrollable_table .avia-data-table > thead > tr > th, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > th, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > th, .responsive .avia_scrollable_table .avia-data-table > thead > tr > td, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > td, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > td {
    white-space: wrap;
  }

Adjust the value of the white-space property from “wrap” to “normal”.

  .responsive .avia_scrollable_table .avia-data-table > thead > tr > th, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > th, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > th, .responsive .avia_scrollable_table .avia-data-table > thead > tr > td, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > td, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > td {
    white-space: normal;
  }

And as suggested above, we could decrease the size of the text in the cells so that they do not overflow outside the cells.

Best regards,
Ismael