CSS tip - A clever way to hide a table row if the row above it is empty

Question

CSS tip - A clever way to hide a table row if the row above it is empty

I have a table in HTML structured 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 elements, I am using a tr class "grid_row_spacer" with CSS {height:4px}. It retains its height even when the tr above it is empty and has no height. However, I need a CSS solution for "grid_row_spacer" that will adjust its height based on whether the preceding tr element is empty or not.

Your suggestions are welcome.

html css

Answer 1

Answer №1

You have the ability to adjust an element's appearance based on whether it is empty or not using a CSS selector called :empty. This method specifically targets elements that do not contain any children. Check out this example on how it works: https://jsfiddle.net/entio/rmyqf0jo/1/

If you want to modify the structure of a table based on its content, one approach is to add a class to empty elements like this:

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

Then, you can apply styles with just

.grid_row_content.empty + .grid_row_spacer { display: none; }

.

Unfortunately, achieving this functionality solely with CSS may not be possible.

Answer 2

You have the ability to adjust an element's appearance based on whether it is empty or not using a CSS selector called :empty. This method specifically targets elements that do not contain any children. Check out this example on how it works: https://jsfiddle.net/entio/rmyqf0jo/1/

If you want to modify the structure of a table based on its content, one approach is to add a class to empty elements like this:

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

Then, you can apply styles with just

.grid_row_content.empty + .grid_row_spacer { display: none; }

.

Unfortunately, achieving this functionality solely with CSS may not be possible.

CSS tip - A clever way to hide a table row if the row above it is empty

Answer №1

Similar questions

Using JavaScript to control the state of a button: enable or

Guide to creating a List from a Table and its rows in Dart

Dynamic Filtering with jQuery List

In certain cases, webkit browsers may conceal LI A (display:block) elements

Utilizing _.where() in underscore to perform case-insensitive value comparisons

There is a lack of CSS import in the HTML document

Can the `resize` CSS property be applied to the `body` element in HTML?

"PHP: Are you sure you want to delete? Confirm your

Enhance the responsiveness of a ReactJS landing page

Steps to shorten HTML content while maintaining consistent column width

Is there a way to align text in the middle while having different icons on each side?

Leverage the power of Next.js to dynamically render a specific section of an HTML webpage

Automating Web Form Completion with VBA and Selenium

Steps to activate a single button within a deactivated fieldset

Review a roster of websites every half a minute (Revise pages every half an hour??)

Button in HTML not responsive to clicks

Displaying images in Dash Python by utilizing external Javascript

Upon clicking on another div, command it to expand to full height and width

Utilizing Jquery's Selectable IDs in a repetitive manner

Utilizing a JavaScript Function on an HTML Page Through an External JavaScript File