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

将CSS和JS定位到特定表

1 个答案: