使用 css 显示/隐藏 html 表格列

Posted 2023-03-05

【中文标题】使用 css 显示/隐藏 html 表格列

【英文标题】：show/hide html table columns using css

【发布时间】：2011-02-20 22:45:37

【问题描述】：

我想显示一个基本的 html 表格，其中包含用于切换显示/隐藏附加列的控件：

<table id="mytable">
    <tr>
        <th>Column 1</th>
        <th class="col1">1a</th>
        <th class="col1">1b</th>
        <th>Column 2</th>
        <th class="col2">2a</th>
        <th class="col2">2b</th>
    </tr>
    <tr>
        <td>100</td>
        <td class="col1">40</td>
        <td class="col1">60</td>
        <td>200</td>
        <td class="col2">110</td>
        <td class="col2">90</td>
    </tr>
</table>

因此，默认情况下，第 1 列和第 2 列将是唯一显示的列 - 但是当您单击第 1 列时，我希望 1a 和 1b 切换，与 2a 和 2b 的第 2 列相同。我最终可能会得到更多的列和更多的行 - 所以当我测试时，任何 javascript 循环方法都太慢而无法使用。

似乎足够快的唯一方法是像这样设置一些 css：

table.hide1 .col1  display: none; 
table.hide2 .col2  display: none; 
table.hide3 .col3  display: none; 

table.show1 .col1  display: table-cell; 
table.show2 .col2  display: table-cell; 
table.show3 .col3  display: table-cell; 

然后在将触发切换的表格标题单元格上设置 onClick 函数调用 - 并确定将“mytable”设置为哪个 css 类将创建我正在寻找的切换效果。有没有一种简单的方法来设置它，以便代码可以用于 n # 列？

更新

这是我想出的，效果很好 - 而且速度非常快。如果您能想出改进的方法，请告诉我。

CSS

.col1 display: none; 
.col2 display: none; 
.col3 display: none; 

table.show1 .col1  display: table-cell; 
table.show2 .col2  display: table-cell; 
table.show3 .col3  display: table-cell; 

Javascript

function toggleColumn(n) 
    var currentClass = document.getElementById("mytable").className;
    if (currentClass.indexOf("show"+n) != -1) 
        document.getElementById("mytable").className = currentClass.replace("show"+n, "");
    
    else 
        document.getElementById("mytable").className += " " + "show"+n;
    

还有 html sn-p:

<table id="mytable">
<tr>
    <th onclick="toggleColumn(1)">Col 1 = A + B + C</th>
    <th class="col1">A</th>
    <th class="col1">B</th>
    <th class="col1">C</th>
    <th onclick="toggleColumn(2)">Col 2 = D + E + F</th>
    <th class="col2">D</th>
    <th class="col2">E</th>
    <th class="col2">F</th>
    <th onclick="toggleColumn(3)">Col 3 = G + H + I</th>
    <th class="col3">G</th>
    <th class="col3">H</th>
    <th class="col3">I</th>
</tr>
<tr>
    <td>20</td>
    <td class="col1">10</td>
    <td class="col1">10</td>
    <td class="col1">0</td>
    <td>20</td>
    <td class="col2">10</td>
    <td class="col2">8</td>
    <td class="col2">2</td>
    <td>20</td>
    <td class="col3">10</td>
    <td class="col3">8</td>
    <td class="col3">2</td>
</tr>
</table>

【问题讨论】：

好的，所以似乎没有其他方法可以做到这一点 - 但有没有办法做到这一点，所以它是一个“粘性”切换？现在，每次我显示一列时，正在显示的另一列进入隐藏状态。我想我必须添加css规则来专门处理每个排列？？？如果我处理 5 个显示/隐藏列，我希望不会……不会很有趣。

嗯 IE7 不喜欢我发布的解决方案。我可以让它与默认显示的所有列一起工作，但不能默认隐藏...

您可以添加多个类：table.className= 'show1 show3' 等。我怀疑 IE 的问题是，正如我所提到的，它不支持 display: table-cell。我会使用像hide 这样的类而不是show，所以你只需要声明table.hide1 col1 display: none; 。

【参考方案1】：

如果您正在寻找一个简单的列隐藏，您也可以使用 :nth-child 选择器。

#tableid tr td:nth-child(3),
#tableid tr th:nth-child(3) 
    display: none;

当屏幕太窄时，我有时将它与@media 标签一起使用来压缩更宽的表格。

【参考方案2】：

使用jQuery的一行代码：

$('td:nth-child(2)').hide();

// If your table has header(th), use this:
//$('td:nth-child(2),th:nth-child(2)').hide();

来源：Hide a Table Column with a Single line of jQuery code

【讨论】：

谢谢！当您尝试隐藏打印样式表的某些列时，此选择器也很有效。

在摆弄了 标签后，这在 chrome 中似乎不起作用，但效果很好

请记住，这仅适用于每行单元格数相等的表格。例如，如果您有一些带有colspan="2" 的单元格，而该行的其余部分中的单元格较少，那么nth-child 将从错误的“列”中选择（并在这种情况下隐藏）单元格。出于这个原因，请确保在要编辑表格的位置旁边保留列隐藏机制的注释/注释，以便将来的编辑者不会破坏布局。

【参考方案3】：

我不认为你可以做任何事情来避免你已经在做的事情，但是，如果你使用 javascript 在客户端上构建表格，你总是可以动态添加样式规则，所以你可以允许任意数量的列，而不会用所有这些规则弄乱你的 css 文件。如果您不知道如何操作，请参阅 http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript。

编辑： 对于您的“粘性”切换，您应该只附加类名而不是替换它们。例如，你可以给它一个“hide2 hide3”等的类名。我认为你并不真的需要“show”类，因为那将是默认值。像 jQuery 这样的库可以让这变得简单，但在没有的情况下，这样的函数可能会有所帮助：

var modifyClassName = function (elem, add, string) 
var s = (elem.className) ? elem.className : "";
var a = s.split(" ");
if (add) 
  for (var i=0; i<a.length; i++) 
      if (a[i] == string) 
          return;
          
      
  s += " " + string;
  
else 
    s = "";
    for (var i=0; i<a.length; i++) 
        if (a[i] != string)
            s += a[i] + " "; 
        
    
elem.className = s;

【讨论】：

您的编辑对我帮助很大！看到这个，粘性切换真的很容易！

【参考方案4】：

不，差不多就是这样。理论上你可以在一些<col>s 上使用visibility: collapse 来做到这一点，但浏览器支持还不够。

要稍微改进一下，您可以在<table> 上使用table-layout: fixed，以允许浏览器使用更简单、更快和更可预测的固定表布局算法。您也可以删除.show 规则，因为当一个单元格不是由.hide 规则创建的display: none 时，它将自动成为display: table-cell。允许表格显示恢复为默认值而不是显式设置它可以避免 IE

【讨论】：

+1 用于提及表格布局：已修复。我发现这在显示表格格式数据时有很大帮助。

感谢您提出 table-layout:fixed，但在我的情况下它不起作用。处理列大小波动的怪物表，最终需要 table-layout:auto 才能看起来像样。

真可惜。固定表可以比自动更平滑。 （fixed 并不一定意味着所有列都必须具有固定宽度，只是宽度不取决于每个单元格中的内容量。）

***.com/questions/15510880/…