Shahzad Ditro Shahzad Ditro - 15 days ago 5
CSS Question

How to responsive the table content generated by plugin

I am working with event plus plugin of WordPress that is used for showing the calendar with event information that is calendar generated by the short code of the plugin.

But when I see calendar on 360*640 or 320*480 resolution calendar is not showing properly. How to responsive this calendar it is using the table.

Here is my site link

Please give some idea how to resolve it.

Answer
.responsive-table {
  overflow-x: auto;
  min-height: 0.01%;
}
@media screen and (max-width: 767px) {
  .responsive-table {
    width: 100%;
    margin-bottom: 1px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ccc;
  }
  .responsive-table > .calendar-table {
    margin-bottom: 0;
  }
  .responsive-table > .calendar-table > thead > tr > th,
  .responsive-table > .calendar-table > thead > tr > td,
  .responsive-table > .calendar-table > tbody > tr > th,
  .responsive-table > .calendar-table > tbody > tr > td, {
    white-space: nowrap;
  }
}

You need to add your table inside a div with class .responsive-table. This will create a horizontal scrollbar and will be easy to use on smaller devices.