html 隐藏列时出现 colspan 问题

Question

我有一个 table分拣机 table，它有两套 2 套 headers，主要 headers，每套有 5 个子 header秒。目标是仅显示 3 列并正确允许用户根据主要 headers.

进行排序

在这五个子header中，第 4 列和第 5 列将始终可见，但对于前 3 列，我只想显示用户选择的一个，并隐藏其他两个。最终 head major header 只会显示 3 列。

当用户选择要显示的数据时，header 列会出现问题。

如果我将 major headers 设置为 colspan 5，那么下一组的列会溢出到第一组，因为外观不正确

当我将 major headers colspan 设置为 3 时，看起来很完美，但是当我尝试基于 major headers 排序时，subheaders 不匹配他们的主要 headers 和排序关闭。

这是一个fiddle http://fiddle.jshell.net/hed56hsd/1/

我错过了什么？什么是有效的解决方法

Answer 1

由于每组只有三列可见，最简单的解决方案是将主 header 上的 colspan 设置为 3。就是这样。

<th colspan='3' class="set1">Set 1</th>
<th colspan='3' class="set2">Set 2</th>
<th colspan='3' class="set3">Set 3</th>

初始化时，您可以通过在事件侦听器末尾添加 .change() 来应用数据选择器 - demo.

$('table').tablesorter({
  theme: 'blue'
});

$(".selector").on("change", function() {
  var selectedData = this.value;
  $(".type1").addClass("hide");
  $('.' + selectedData).removeClass("hide");
}).change();

如果比这更复杂，我会建议您尝试 columnSelector widget，它会自动修改 colspan 以防止 table 格式混乱。

html 隐藏列时出现 colspan 问题

html colspan issue when hiding columns

html

javascript

css

jquery

tablesorter