Tabular Data Table (scrollable) inside of a tab section on mobile

Hey navindesigns,
I see that the table is not switching to the mobile view it’s cells are going to 100% width, did you add any custom css that might have change this?
Please include an admin login in the Private Content area so we can examine this closer.

Best regards,
Mike

Hi,
Thank you for the login, since the table is set to scrolling it retains it’s width and is scrollable with a sideswipe, but in mobile, the tab section is also scrollable with a sideswipe, so the two elements nested are both being controlled by the same sidesipe.
So one solution is to add this css to show the complete table in mobile view and not rely on the sideswipe:

@media only screen and (max-width: 767px) { 
    #top.page-id-133 #tab_table .avia_scrollable_table .avia-table th,.avia_scrollable_table .avia-table td {
    	padding: 9px 1px !important; 
    }
    #top.page-id-133 #tab_table .avia_scrollable_table .avia-table li {
    margin-left: 0em !important;
    }
    #top.page-id-133 #tab_table .avia_scrollable_table .avia-table li {
    list-style: none !important; 
    }
    #top.page-id-133 #tab_table .avia_scrollable_table .avia-table {
    	width: 100% !important; 
    }
    .responsive #top.page-id-133 #tab_table .avia_scrollable_table .avia-data-table > thead > tr > th,
    .responsive #top.page-id-133 #tab_table .avia_scrollable_table .avia-data-table > tbody > tr > th,
    .responsive #top.page-id-133 #tab_table .avia_scrollable_table .avia-data-table > tfoot > tr > th,
    .responsive #top.page-id-133 #tab_table .avia_scrollable_table .avia-data-table > thead > tr > td,
    .responsive #top.page-id-133 #tab_table .avia_scrollable_table .avia-data-table > tbody > tr > td,
    .responsive #top.page-id-133 #tab_table .avia_scrollable_table .avia-data-table > tfoot > tr > td {
        white-space: unset !important; 
    }
}

If you test this css please clear your browser cache.
Please see the screenshot in Private Content area of the expected result. This is for a larger mobile screen (425px) for a small mobile screen like the iPhone 6 the text may overflow the cells.
So probably the best solution is to choose “adjust table to screen size” in the “Responsive Styling” option, unless you show your table below the tab section.

Best regards,
Mike

Hi,
I believe justify-content: space-evenly; works better than justify-content: space-around; in this case.
I changed your css to this to demonstrate, pleas check:

.js_active .av-tab-section-tab-title-container { 
    display: flex!important;
    justify-content: space-evenly;
padding-top: 0px;
padding-bottom: 0px;
}

You can also try these options

Best regards,
Mike