javascript - 将 CSS 和 JS 定位到特定表格

Question

我在一个页面上有三个表格，我想将一些响应功能应用于 3 个表格中的 2 个 - 第 3 个只是一个基本的 2 列表格。我遇到的问题是 css + js 也全局应用于所有表，包括第三个表，我或多或少只需要作为基本表，没有任何 js 花里胡哨的东西。

我已尝试将一个类应用于表并查看脚本，但无法解决问题。

https://codepen.io/GideonB/pen/rgWgPm我在这支笔中重现了这个问题，这样你就可以看出它有点广泛。基本上，第三个较小的表格有两列，但一旦屏幕尺寸减小到 1024px 以下，它就会减少到一列(继承我只想应用于两个较大表格的样式)，同时隐藏另一列。下面是我正在使用的脚本。

$('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);

我们将不胜感激任何帮助和建议。基本上我似乎无法弄清楚如何专门针对这两个表而单独留下第三个。我对上面两个表格所做的任何更改都会影响较小的表格。

Answer 1

尝试将此添加到媒体查询之外的 css，对我有用，请参见下面的代码笔:

table.si-cov-tb td{
 display: table-cell;
}

codepen