Question

我有一个表格，我希望隐藏整个列（3rth＆gt;＆gt; head + body），只需将名为'masked'的类应用于标题col，如下所示：

<table>
 <thead>
    <th>aaa</th>
    <th class="masked">bbb</th>
    <th class="masked">ccc</th>
 </thead>
 <tbody>
    <tr>
        <td>a1</td>
        <td>b1</td>
        <td>c1</td>
    </tr>
    <tr>
        <td>a2</td>
        <td>b2</td>
        <td>c2</td>
    </tr>
    <tr>
        <td>a3</td>
        <td>b3</td>
        <td>c3</td>
    </tr>
 </tbody>

css：

.masked {
    display:none;
}

此时，仅屏蔽了标题col。如何将整个列掩盖？

在此处查看演示：http://jsbin.com/axukob/1/

感谢。

编辑---------------------

我对jQuery解决方案没问题，因为只用CSS似乎很难。但是对我来说，重要的是将课程添加到标题'th'。

请注意，我可能有超过1列要掩盖。

Answer 1

在CSS中添加以下代码将隐藏表格中的第3列...尝试...

 td:nth-child(3){ display : none;}

小提琴：http://jsfiddle.net/RYh7U/89/

Answer 2

将类移到表中并添加此样式（在此处重命名为 mask-col-3 ）：

<style type="text/css">
table.mask-col-3 th + th + th,
table.mask-col-3 td + td + td {
  display: none;
}
</style>

Answer 3

由于您愿意使用JS（您必须使用它），您可以这样做：

示例：http://jsfiddle.net/mBhB3/1/

$(document).ready(function() {
    var masked = $('.masked');
    $.each(masked, function() {
        var idx = $(this).index();
        $.each($('tr'), function() {
            $(this).find('td').eq(idx).hide();
        });
    });
});

通过在标题col＆gt;＆gt;上添加一个类来隐藏我的表的整个列。 jQuery解决方案

3 个答案: