如何使宽度超过 100% 的表格居中？

Question

我想在网页上将宽度超过 100% 的表格居中。 在我的 wordpress 网页上，我有一个插件，它会自动为我创建一个日历表。不幸的是，我的主题将我网页上的空间限制在我屏幕的一部分上。左边和右边的其余部分是空白。

我对其他方面的这种行为很好，但是如果日历表能够动态适应屏幕分辨率并向右和向左增加到整个屏幕，那么日历表会更漂亮。所以我想我必须把表格的宽度增加到100%以上，因为100%就是现在这样。 这是我网页的链接：https://www.greendroid.de/kalender

如果我使用以下代码 sn-p，日历会变大，但不再居中。右侧表格列不再可见

.ics-calendar-month-grid
{
    width:150%;
}

之后我尝试了不同的方法使表格居中，但没有 CSS sn-p 对我有用。 任何人都知道如何使表格的宽度自动适应网页上的屏幕尺寸？ 谢谢和最好的问候 NKL

Answer 1

由于它会从当前位置增长，您只需对超过 100 的金额的一半应用负边距...所以 (150-100)/2=25 所以在左侧应用 -25% 边距将做：

.ics-calendar-month-grid {
    width: 150%;
    margin-left: -25%;
}

它会起作用的。

更新

要使其具有响应性，只需添加/更新您的 CSS：

.ics-calendar-month-grid {
    width: 150%;
    margin-left: -25%;
}

@media screen and (max-width: 1699px) {
    .ics-calendar-month-grid {
        width: 125%!important; margin-left: -12.5%!important;
    }
}

@media screen and (max-width: 1415px) { 
    .ics-calendar-month-grid {
         width: 110%!important; margin-left: -5%!important;
    }
}

@media screen and (max-width: 1415px) {
    .ics-calendar-month-grid {
         width: 100%!important; margin-left: 0!important;
    }
}

这是一种应该可行的方法...您可以添加您需要/想要的所有步骤，只需查看 chrome 工具（按 F12）右上角的分辨率即可添加特定步骤。请注意，我已经添加了!important 声明，因为我直接使用 chrome 开发人员工具与您的网站一起玩。