Hiding the visibility of a table-cell will conceal the background color of its parent table row

In my coding project, I have implemented forms with a structure that utilizes display:table-row and display: table-cell. Previously, in Firefox 52, I was able to hide a cell element using visibility:hidden, effectively hiding the cell while maintaining the CSS-defined structure (as opposed to using display:none).

However, upon testing in Firefox 64 (and also Chrome), I noticed that when I hide the visibility of the cell, the parent table-row loses its background color at that specific position.

The code snippet below captures this issue: 

#tableRow{
  display: table-row;
  background-color: #f5f5f5;
}
.cell{
  display:table-cell;
}
#hide{
  visibility:hidden;
}

<div id="tableRow">
  <a href="#" class="cell">Visible</a>
  <a href"#" class="cell"id="hide">Not visible</a>
  <a href="#" class="cell">Visible</a>
</div>

I experimented with using opacity: 0, but found that certain elements remain clickable or trigger different events, rendering opacity ineffective in this scenario.

Do you have any suggestions or insights on this matter? Is this behavior intentional?

jqueryhtmlcssfirefox

Answer №1

To achieve a background color effect and work around this issue, I would recommend using box-shadow

.container {
  display: table;
}

#tableRow {
  display: table-row;
  box-shadow: -100vw 0 0 red inset;
}

.cell {
  display: table-cell;
  padding: 10px;
}

#hide {
  visibility: hidden;
}
<div class="container">
  <div id="tableRow">
    <a href="#" class="cell">Visible</a>
    <a href="#" class="cell" id="hide">Not visible</a>
    <a href="#" class="cell">Visible</a>
  </div>
</div>

*Although it may seem like a bug, there is no documented explanation for this behavior

Answer №2

#tableRow{
  display: table;
  background-color: #f5f5f5;
}
.cell{
  display:table-cell;
}
#hide{
  visibility:hidden;
}
<div id="tableRow">
  <a href="#" class="cell">Visible</a>
  <a href"#" class="cell"id="hide">Not visible</a>
  <a href="#" class="cell">Visible</a>
</div>

Answer №3

To create a trick using color:transparent and to prevent events (specifically for a elements), you can add pointer-events: none;.

#tableRow{
  display: table-row;
  background-color: red;
}
.cell{
  display:table-cell;
}
#hide{
  color:transparent;
  pointer-events: none;
}
<div id="tableRow">
  <a href="#" class="cell">Visible</a>
  <a href"#" class="cell"id="hide">Not visible</a>
  <a href="#" class="cell>Visible</a>
</div>

By following these inputs:

    #tableRow{
      display: table-row;
      background-color: red;
    }
    .cell{
      display:table-cell;
    }
    #hide{
      color:transparent;
      pointer-events: none;
      border:none;
      outline:0;
      padding: 2px;
    }
<div id="tableRow">
      <a href="#" class="cell">Visible</a>
      <input href"#" class="cell" id="hide"/>
      <a href="#" class="cell">Visible</a>
</div>

Answer №4

Include the font-size: 0 property to hide a specific div.

#tableRow{
  display: table-row;
  background-color: #e5e8ec;
}
.cell{
  display:table-cell;
}
#hide,
#hide>* {
  font-size: 0;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  height: 0;
  background: transparent;
  width: 75px
}
<div id="tableRow">
  <a href="#" class="cell">Visible</a>
  <a href"#" class="cell"id="hide">
    <input type="text"/>
    <button type="button">Click Me!</button>
    Not Visible</a>
  <a href="#" class="cell">Visible</a>
</div>

Answer №5

Make sure to adhere to the specified format

#tableRow ul {
    display: table-row;
    background-color: #f5f5f5;
}
#tableRow ul li {
    display: table-cell;
}

#hide {
    visibility: hidden;
}
<div id="tableRow">
    <ul>
  <li>
<a href="#" class="cell">Visible</a>
</li>
    
    <li>
<a href"#"="" class="cell" id="hide">Not visible</a>
</li>
    
    <li>
<a href="#" class="cell">Visible</a>
</li>
  
  </ul>
</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

Numerous HTML documents being uploaded to the server for a multitude of individuals

Currently, I am developing a game on a website where players create new rooms and are assigned specific roles with individual powers. Some players need to wait for input from others, creating a dynamic gameplay experience. Additionally, there are certain ...

javascripthtmlnode.jsmongodbnpm

iOS Devices Experiencing HTTP 500 Error with JS Files and Libraries

I have encountered a puzzling issue with my web application. While it runs smoothly on PC devices without any errors, I am facing HTTP 500 errors when running it on iOS and inspecting it using Safari's Web Inspector. Specifically, I am seeing these er ...

javascriptjqueryiossafarimobile-safari

Navigation bar subtitle with items aligned to the right

My navigation bar includes a subtitle, and I implemented the technique found here to add it. However, after adding the subtitle, my nav bar lost its right alignment. Some items in the nav bar need to be aligned to the right, but they are no longer since I ...

htmlbootstrap-4

The styling applied through the MUI TextField sx props does not take effect

Currently, I am attempting to customize a TextField component in a unique way using the sx prop: <TextField size="small" sx={{ padding: '1px 3px', fontSize: '0.875rem', lineHeight: '1.25 ...

htmlcssreactjsmaterial-uijsx

Why is it that the sequence of CSS imports isn't functioning correctly?

<link href="style1.css" rel="stylesheet" type="text/css"> <link href="style2.css" rel="stylesheet" type="text/css"> When setting the color in style1 to white: .box{ color:#fff; } In style2, the color is set to black. .box{ color:#00 ...

htmlcsstemplates

Bulma inquired, "What is the best way to position a button at the center of a

<div class="container"> <button class="btn">Click me</button> </div> <button class="is-centered"> seems to be malfunctioning. ...

htmlcssbulma

Customizable Data Tables with Jquery Datatables

Currently, I am in the process of creating a customizable data table using Jquery's Datatable plugin. The goal is to allow users to edit, remove, update, and add columns to the table. To achieve this functionality, I have been experimenting with the f ...

jqueryajaxdatatables

Styling your text: Choosing the right font for an online editing tool

In the process of creating a web-based code editor, I have currently implemented the following rule for both line numbers and the source code: font-family : "Courier New", Courier, monospace I have a couple of questions regarding this choice: Will this ...

cssfonts

Seeking a customized Bootstrap-4 code snippet for a sleek sidebar navigation feature

I am in need of a Bootstrap code to create a sidebar navigation with dropdown menus for an admin dashboard project I am working on. Any assistance would be greatly appreciated! Here is the code snippet so far: Home ...

htmlcssbootstrap-4

Is there a way to create a miniature camera or map within a scene in three.js without cropping the viewport?

Is there a way to create a mini-map or mini-cam using three.js? The idea is to have two camera views - one mini-map or "mini-cam" in the top right corner (as shown in the image) and the main camera view covering the rest of the scene without the border. ...

javascriptcssdomthree.js

Generate a new style element, establish various classes, and append a class to the element

Is there a more efficient solution available? $("<style>") .attr("type", "text/css") .prependTo("head") .append(".bor {border:2px dotted red} .gto {padding:10px; font-size:medium}"); $("input:text").addClass("bor gto").val("Enter your t ...

javascriptjquerycss

Creating uniform table column widths within a flex container with dynamic sizing

I am working on designing a navigation system for my website using a table inside a flexbox. I want to ensure that the table columns have equal width and can scale dynamically. Additionally, I aim to wrap the text in the data cells without changing the cel ...

htmlcss

Unusual Characteristics of Synchronous Ajax Requests in JavaScript

First and foremost, I'd like to apologize if my approach seems unconventional. My background is primarily in C development, so I tend to tackle AJAX issues in a way that reflects my experience in C programming. The scenario at hand involves a script ...

javascriptjqueryajaxmultithreadingsynchronization

Creating a visually appealing multi-bar chart in AngularJS: Tips for effectively presenting data

Imagine that I have the JSON data below: [ { month: "Jan", cost: 80, energy: 90 }, { month: "Feb", cost: 50, energy: 80 }, { month: ...

javascripthtmlcssangularjs

Preventing the ondrop event in jQuery Draggable and Droppable when interacting with another draggable element

Looking for help with my drag and drop functionality. I have 3 blue draggable divs and 1 red droppable div. I want to trigger an event when I drag a blue div onto the red one and the space is free (no other red divs in that area). Here are some screenshots ...

jqueryjquery-ui-draggablejquery-ui-droppable

Need help aligning content with flexbox? Having trouble with align-content and justify-content not working correctly?

First and foremost, I want to express my gratitude in advance for any assistance you can provide. My goal was to neatly align three pieces of content within each row, similar to the image displayed here: https://i.sstatic.net/vtsRj.png To achieve this lay ...

htmlcssreactjsflexbox

What is causing the error message "Error: Cannot update active font: 'Fira Sans' is not included in the font list" in react-font-picker?

For my project, I have implemented a font picker component in the following manner: <FontPicker apiKey={process.env.REACT_APP_GOOGLE_API_KEY} activeFontFamily={activeFontFamilyMobile} ...

javascripthtmlreactjs

Ways to center the percentage on the progress bar

I'm having an issue with positioning the percentage 100% in the center of the element. I attempted adjusting the spacing in the JavaScript code, but so far it hasn't been successful. Here is the current output for the code: http://jsfiddle.net/G ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Unable to trigger onSelect event on the datepicker component

Whenever a date is chosen, I need to trigger a javascript function. Here is the javascript code: $(document).ready(function(){ var date_input=$('input[name="date"]'); //our date input has the name "date" var container=$('.bootstrap- ...

javascriptjquery

I need assistance with retrieving an image from a database using PHP

How can I display an image from the database on a new page using PHP? Whenever I click on the image, it always shows the same image on the new page. How can I make it so that the image displayed on the new page is the one I clicked on in the previous pag ...

phphtmlmysqlsql