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

Question

I would like to center a table with more than 100% width on a webpage. On my wordpress webpage I have a plugin which is creating a calender table for me automatically. Unfortunately my theme is limiting the space on my webpage to only a portion of my screen. The rest on the right and left is white space.

I am fine with this behavior on the other sides, but the calender table would be more beautiful if the calender table would dynamically adapt to the screen resolution and increase to the whole screen to the right and to the left. Therefore I think I have to increase the width of the table to more than 100%, because 100% is just as it is now. Here is the link to my webpage: https://www.greendroid.de/kalender

If I use the following code snippet, the calender gets bigger, but is not centered anymore. The right table columns are not longer visible

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

I tried different methods to center the table afterwards again, but no CSS snippet worked for me. Anyone has an idea how I can adapt the width of the table automatically to the screen size on my webpage? Thanks and best regards NKL

Answer 1

Since it will grow from the current position you only have to apply negative margin to the half of the amount over 100... so (150-100)/2=25 so appliying -25% margin to the left side will do:

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

It will work.

Update

To make it responsive just add/update your CSS with:

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

This is an approach that should work... you can add all the steps you need/want just take a look in chrome tools (hit F12) the resolution you have on the top right corner to add a specific step. Note that i've put !important declaration because i played with you website directly with chrome developer tools.

Answer 2

It's a Wordpress theme that allows the use of full-width elements. So, either you add the class .alignfull to that element/section in the HTML code or (if the block editor lets you) you choose "full width" from the alignment selection menu of that block in the editor.