1

我有一个表，我想通过简单地将名为“masked”的类应用于标题 col 来隐藏整个列（第 3 列 >> head+body），如下所示：

<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 列要屏蔽。

4

3 回答 3

0

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

<style type="text/css">
table.mask-col-3 th + th + th,
table.mask-col-3 td + td + td {
  display: none;
}
</style>
于 2013-02-18T14:48:25.853 回答
0

通过在 CSS 中添加以下代码将隐藏表格中的第三列...试试看...

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

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

于 2013-02-18T15:17:31.873 回答
0

由于您愿意使用 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();
        });
    });
});
于 2013-02-18T15:52:02.907 回答