Table borders not displaying properly in Chrome when cells are hidden

I'm dealing with a peculiar issue regarding the display of borders in Chrome when individual cells are hidden within an HTML table. The borders disappear, despite being defined for the row and table elements. Does anyone have experience with this specific behavior in Chrome? I've attempted various workarounds without success.

CSS:

.hide-dm, .hidden, .hide-training, table.hide-dm, table.hide-training, .hide-ca {
    display: none;
}

.table {
    border: 1px solid #ddd;
    border-collapse: collapse;
}

.table > tbody > tr {
    border-top: 1px solid #ddd;
}
Image Link Another Image Link
htmlcssgoogle-chromehtml-table

Answer №1

To ensure your CSS hidden classes work properly, consider placing them on the table cell contents instead of directly on the cells themselves. You can achieve this by using a wrapper element.

<td><div class="hidden">...</div></td>

If you are certain that the table cells will only contain elements (no plain text nodes), you can implement the following CSS solution:

.hidden:not(td), td.hidden * {
  display: none;
}

Alternatively, if JavaScript is an option for you, you can write a script to iterate through table cells with the specified class, dynamically create wrapper divs with the hidden class, and remove the hidden class from the table cell.

.hidden {
  display: none;
}

$("td.hidden").removeClass("hidden").wrapInner("<div class='hidden'></div>");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having issues with Div CSS functionality not properly functioning

My background CSS is working fine, but the styling for the .about div is not applying. Here is my HTML code: <DOCTYPE! HTML> <head> <link rel="stylesheet" type="text/css" href="CSS.css"> </head> <body> ...

csshtml

What approach do you recommend for creating unique CSS or SCSS styles for the same component?

Consider a scenario where you have a complicated component like a dropdown menu and you want to apply custom styles to it when using it in different contexts. This customization includes not only changing colors but also adjusting spacing and adding icons. ...

javascriptcssdesign-patternssass

Activate scroll event when image src changes in Angular using jQuery

Seeking assistance with utilizing jQuery to scroll to a specific thumbnail inside a modal when left/right arrows are pressed. The modal should appear when the user clicks on an image. I've managed to implement scrolling upon clicking a thumbnail, but ...

javascriptjqueryhtmlangularjs

"Automatically scroll back to the top of the page once new content

Is there a way to automatically scroll the page to the top after content has been loaded via Ajax? Here is the code I am using to display the content: $(document).ready(function () { var my_layout = $('#container').layout(); $("a.item_l ...

phpjqueryhtmlajax

Enhance the <div> with interactive content through dynamic updates on click within the same element

I am currently developing an Editor-Menu for a website administration. When I open admin.php, the Editor-Menu should be loaded into the #ausgabe div using the code $('#ausgabe').load('./admin-ajax/ajax2.php'). This functionality is work ...

javascriptjqueryhtmlajax

"Strategically placing elements on an HTML grid

My current project involves creating a grid layout in HTML using CSS. The goal is to use this layout for various elements such as images, text, and links. What I envision is a visually appealing grid where each object fits together seamlessly with no gaps ...

javascriptjqueryhtmlcss

Looking to integrate the date, month, and year selection tags into the inline format

The Edit User Profile page includes a Birthday field, which is currently displayed vertically. I am looking to change the layout so that the Birthday field appears horizontally. Here is the code I am using: Within visitors/edit.html.erb, <%= simple_f ...

javascripthtmlcssruby-on-rails-4datepicker

Achieving perfect center alignment for the middle element with flexbox

When it comes to the layout below, my objective is to always keep the middle item centered within the container div. This means that the left and right items should be aligned to the far left and right of the container respectively. The current styling fo ...

htmlcsssassflexboxstyling

Submitting documents via jQuery post

I am facing an issue with my HTML form where I am trying to upload an image file. After submitting the form, I use JavaScript to prevent the default action and then make a jQuery post request (without refreshing the page) with the form data. However, despi ...

jqueryhtmlajaximagepost

The edge of the 'parent' element is obscured by the :after element

I am trying to create a transparent outlined button with a shadow in the shape of the button. However, I am facing an issue where the border of the button appears behind the :after element. You can see the problem below. Adding overflow: hidden to the tog ...

htmlcss

I'm looking for assistance in changing my mascot image to a pixelated image when I hover over it. Can anyone provide guidance on how to achieve this?

Seeking assistance on how to change my mascot image to a pixelated image when hovered over. Any tips or advice would be appreciated! Here is the CSS I'm currently using: .mascot { display: block; margin-left: auto; margin-right: auto; ...

htmlcss

What is the best way to split text copied from a textarea into <p> paragraphs with an equal number of characters in each?

Check out this JSFiddle version I've found a JSFiddle example that seems perfect for my current project needs. However, I'm wondering how to modify the code to ensure that each paragraph is evenly divided with the same number of characters and a ...

javascriptjqueryhtmlcssparagraph

Tips for creating a header.php and footer.php integrated with CSS files

I am in the process of constructing my website using HTML files. I want to make sure that my header and footer sections are dynamic so I can easily modify them without having to update numerous files each time. While I've attempted a few methods based ...

phphtmlcssheaderfooter

Using namespaces in Rails to encapsulate CSS styles

Is there a way to add namespaces to CSS within a Rails project? I have two pre-defined CSS files and two application layouts. I want the first layout to use one CSS file, and the second layout to use the other. However, both CSS files have styles for the ...

cssruby-on-rails

Is it possible to conduct HTML-based Selenium tests without an internet connection?

As a newcomer to Selenium, I am currently using the Selenium IDE which has led me to create table structures like the one below: <table cellspacing="1" cellpadding="1" border="1" name="SELENIUM-TEST"> <thead> <tr class="title"> ...

htmlseleniumbrowserselenium-webdriveroffline

Converting JSON data into a JavaScript array and retrieving the array through an AJAX request from PHP

Currently, I am working on a project where I have created a function named AjaxRequest to manage all my AJAX requests. While making the requests is not an issue, receiving and placing the data back onto the page has proven to be quite challenging. Within ...

javascriptphphtmlajaxjson

The overflowing pop-up container

When I trigger a popup that dynamically generates a fixed background with a centered dialog, it works well. However, on smaller monitors like laptops, tablets, and phones, the content can overflow beyond the visible area due to its fixed container, making ...

jquerycss

What is the best way for me to incorporate images retrieved from an API call into my

Hey everyone, this is my first time posting on here so if there's anything I'm missing, please let me know! I've run into an issue with the images on my categories page not aligning properly and being different sizes after I incorporated som ...

javascripthtmlcss

Sending a parameter to a different function (on a separate webpage)

At the start of my webpage, there are two radio buttons on the first page, each with its own value. Upon clicking a link to move to the second page, a for loop is activated to grab the value of the selected button. The script has been tested and works as e ...

javascripthtmlfunctionvariables

Updating the Wordpress menu: Get rid of the list items and instead add the class ".current-menu-item" directly to the anchor tag

Is there a way to customize the output of wp_nav_menu(); to display a navigation menu like this: <nav> <a>Menu Item</a> <a class="current-menu-item">Menu Item</a> <a>Menu Item</a> <a>Menu Ite ...

phphtmlwordpressfunction