Shahzad Ditro Shahzad Ditro - 1 year ago 87
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 Source
.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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download