CSS trick- How to hide one tr if the upper tr is empty

i am having a table html like this

<tbody>
    <tr class="grid_row_content">
        <td class="gridCell">
            <div class="componentswitcher">
            <div style="display:none;"></div>
            </div>
        </td>
    </tr>
    <tr class="grid_row_spacer"></tr>
    <tr class="grid_row_content">
        <td class="gridCell">
            <div class="componentswitcher">
            <div style="display:none;"></div>
            </div>
        </td>
    </tr><tr class="grid_row_spacer"></tr>
</tbody>

for the spacing between two tr i am having a tr class "grid_row_spacer" having css {height:4px} it even takes it's height when it's above tr is empty and doesn't have any height,like this. i need a css for "grid_row_spacer" that will take it's height when it's above tr is not empty.

Suggestion Please

Answers


You can modify element based on if it is empty or not with CSS selector :empty, but that works for empty elements without children, like so https://jsfiddle.net/entio/rmyqf0jo/1/

If You could change markup of the table based on its content, namely add some class to empty element, like:

<tr class="grid_row_content empty">
    ...
</tr>
<tr class="grid_row_spacer"></tr>

Then You use just .grid_row_content.empty + .grid_row_spacer { display: none; }

I am afraid this is not possible to achieve using only-CSS solution.


Need Your Help

Issue with setTo method in HtmlEmail for setting mail to multiple recipient

java apache-commons-email

We have a module which will send reminder mail. We are using apache commons email library for sending mail. We have no issue if we send mail only one email address using addTo method of HtmlEmail, ...

solr multicore post data

java xml solr

I am using solar application in multicore mode, and I am unable to post data(xml),when i am trying to post a data by command line(cmd windows) to solr then i get an error...