1

次のように、「マスク」という名前のクラスを見出しの列に適用するだけで、列全体 (3番目 >> ヘッド + ボディ) を非表示にしたいテーブルがあります。

<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/

ありがとう。

編集 - - - - - - - - - - -

CSSだけでは難しそうなのでjQueryでOKです。しかし、見出し「th」にクラスを追加しておくことが重要です。

マスクする列が複数ある場合があることに注意してください。

4

3 に答える 3

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 に答える
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 に答える