I am encountering an issue with applying responsive features to only 2 out of 3 tables on a page. The third table is meant to remain simple without any additional styling or javascript effects. Despite my attempts at using classes and examining the script, I have been unsuccessful in resolving the problem.
In this CodePen demonstration, I have recreated the issue for better understanding. Essentially, when the screen size drops below 1024px, the two larger tables adapt appropriately while the smaller table inherits unwanted styles causing layout issues. The provided script includes functionality which seems to affect all tables uniformly.
$('ul').on('click', 'li', function() {
var pos = $(this).index() + 2;
$('tr').find('td:not(:eq(0))').hide();
$('td:nth-child(' + pos + ')').css('display', 'table-cell');
$('tr').find('th:not(:eq(0))').hide();
$('li').removeClass('active');
$(this).addClass('active');
});
// Initialize
var mediaQuery = window.matchMedia('(min-width: 640px)');
// Add Event Listener
mediaQuery.addListener(selectElement);
// Function Event Listener
function selectElement(mediaQuery) {
if (mediaQuery.matches) {
$('.sep').attr('colspan', 5);
} else {
$('.sep').attr('colspan', 2);
}
}
// On Load
selectElement(mediaQuery);
Any insights or advice on how to target the specific tables individually would be highly appreciated. Currently, modifications intended for the larger tables inadvertently impact the smaller one as well.