1

クラスが設定された子要素を持たない要素を非表示にする (印刷しない) 印刷スタイルシートを作成しようとしています。

私はこれがうまくいくかもしれないと思っていましたが、残念ながらそうではありません。

<style type="text/css" media="print">
    table:not( > thead > tr > th > .Collapse)  {
        display:none;
    }
</style>

ただし、可能であればJavaScriptを使用したくありません。

これはできますか？

問題の要素のhtmlは次のとおりです... 2番目のテーブルは印刷時に非表示にする必要があります...

<table>
    <thead>
        <tr>
            <th>
                <span class="Collapse">Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>
<table>
    <thead>
        <tr>
            <th>
                <span class="Expand">Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>
4

2 に答える 2

1

スパンをターゲットにするには:

table > thead > tr > th > .Expand  {
    display:none;
}

アップデート

CSS クラスをターゲットにしてその親に影響を与えることは、現在のところ不可能です。テーブルを非表示にする最も簡単な方法は、テーブルにクラスを追加することです。そうすれば、そのクラスを簡単にターゲットにすることができます。

例

<table>
    <thead>
        <tr>
            <th>
                <span class="Collapse">Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>
<table class="hide-for-print">
    <thead>
        <tr>
            <th>
                <span class="Expand">Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>
于 2013-06-24T16:04:17.460 に答える
1

代わりに、クラスをテーブルに配置してから、その中のスパンを選択することをお勧めします。

<table class="Collapse">
    <thead>
        <tr>
            <th>
                <span>Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>
<table class="Expand">
    <thead>
        <tr>
            <th>
                <span>Lorem ipsum...</span>
            </th>
        </tr>
    </thead>
    <tbody style="display: none; ">
        <tr>
            <td>Blah Blah...</td>
        </tr>
    </tbody>
</table>

.Collapse {
   display:none;
}

.Collapse thead tr th span {
}

.Expand thead tr th span {
}
于 2013-06-24T16:03:08.017 に答える