0

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

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

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

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

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

4

1 回答 1

1

尝试将其添加到媒体查询之外的 CSS 中，对我有用，请参阅下面的代码笔：

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

密码笔

于 2019-05-14T21:08:02.243 回答