css - 如何响应插件生成的表格内容

Question

我正在使用 WordPress 的 event plus 插件，用于显示带有事件信息的日历，该事件信息是由插件的短代码生成的日历。

但是当我在 360*640 或 320*480 分辨率下看到日历时，日历显示不正确。如何响应使用表格的日历。

这是我的网站 link

请给出一些解决方法。

Answer 1

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

您需要将表格添加到类为 .responsive-table 的 div 中。这将创建一个水平滚动条，并且易于在较小的设备上使用。