The table isn’t adjusting the width according to the page size

I’m having an issue with the table size. It’s using a width: auto!important flag that I am unable to override. I cannot find this in the plugin itself, there are no media queries, but in my DevTools it shows as:

@media (max-width: 992px)
.table-responsive table {
width: auto!important;
margin: 0 auto 15px auto!important;
}

I want to change this to width: 100% !important; but cannot get anything to override this, not even the CSS override section.

Thanks, it looks on firefox after changing the width to 100% !important but chrome is still having issues.

Hi,

thanks for your post, and sorry for the trouble.
Also sorry for the late reply! As I was on holidays, I did not have a chance to look at this earlier.

rhamlette417, can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!
This CSS command is definitely not coming from TablePress.

mrasadmanzoor, I’m not sure that I see the issue on your site. Can you maybe explain it again?

Regards,
Tobias

TobiasBg, thank you for the response.

I cannot find the code that is effecting the table in any of the website code, including the plugin, which is most puzzling for sure. I have even used the plugin’s ‘CSS Here’ feature and I see it on the page but it does not override the 992px media query. My site is already guttered, I want it to fill all of the space within the gutter, especially on the smaller screens.

https://mci.build.tsts.com/bidding-opportunities/ – scale it down below 992px. The CSS that appears is placed onto the page into the head element with a bunch of other styles:

<style>
    .table-responsive table{
        border-collapse: collapse;
        border-spacing: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        margin: 0 auto 20px auto;
    }

    .table-responsive {
        overflow-x: auto;
        min-height: 0.01%;
        margin-bottom: 20px;
    }

    .table-responsive::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    .table-responsive::-webkit-scrollbar-thumb {
        background: #dddddd;
        border-radius: 2px;
    }
    .table-responsive::-webkit-scrollbar-track-piece {
        background: #fff;
    }

    @media (max-width: 992px) {
        .table-responsive table{
            width: auto!important;
            margin:0 auto 15px auto!important;
        }
    }

    @media screen and (max-width: 767px) {
        .table-responsive {
            width: 100%;
            margin-bottom: 15px;
            overflow-y: hidden;
            -ms-overflow-style: -ms-autohiding-scrollbar;
        }
        .table-responsive::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

    }

    @media screen and (min-width: 1200px) {
        .table-responsive .table {
            max-width: 100%!important;
        }
    }
    .wprt-container .table > thead > tr > th,
    .wprt-container .table > tbody > tr > th,
    .wprt-container .table > tfoot > tr > th,
    .wprt-container .table > thead > tr > td,
    .wprt-container .table > tbody > tr > td,
    .wprt-container .table > tfoot > tr > td,
    .wprt-container .table > tr > td{
        border: 1px solid #dddddd!important;
    }

    .wprt-container .table > thead > tr > th,
    .wprt-container .table > tbody > tr > th,
    .wprt-container .table > tfoot > tr > th,
    .wprt-container .table > thead > tr > td,
    .wprt-container .table > tbody > tr > td,
    .wprt-container .table > tfoot > tr > td,
    .wprt-container .table > tr > td{
        padding-top: 8px!important;
        padding-right: 8px!important;
        padding-bottom: 8px!important;
        padding-left: 8px!important;
        vertical-align: middle;
        text-align: center;
    }

    .wprt-container .table-responsive .table tr:nth-child(odd) {
        background-color: #fff!important;
    }

    .wprt-container .table-responsive .table tr:nth-child(even){
        background-color: #f9f9f9!important;
    }

    .wprt-container .table-responsive .table thead+tbody tr:nth-child(even) {
        background-color: #fff!important;
    }

    .wprt-container .table-responsive .table thead+tbody tr:nth-child(odd){
        background-color: #f9f9f9!important;
    }
    
    
    .table-responsive table p {
        margin: 0!important;
        padding: 0!important;
    }

    .table-responsive table tbody tr td, .table-responsive table tbody tr th{
        background-color: inherit!important;
    }

</style>

Hi,

thanks for the link! It seems that all this code is added by the “WP Responsive Table” plugin on your site. I suggest to deactivate that for a test.

Regards,
Tobias

Ah ha! You are correct! Thank you for that, I had missed that plugin. It was a prior attempt to get a good table on the site but it didn’t meet my client’s needs.

Thanks for your time! Have a nice day. Great plugin, btw. Easy and effective ??

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!