Member Avatar for come_again

Hello,

I am trying to create a table that has certain elements covered up. More specifically, I have a table and would like to have a cell in the table covered up (like a flashcard). I have been looking online but everything just sets the background color... I thought of just deleting the contents of the cell and setting a background color, but I would like to preserve the size of the cell. Any thoughts? Thank you in advance.

CA

I included a sample html table below.

<TABLE>
<TR>
<TH>Name</TH>
<TR>
<TD>John Smith</TD> # I would like to cover this cell for example to then reveal it later
<TR>
<TD>Joe</TD>
</TABLE>
  • 3 Contributors
  • 2 Replies
  • 187 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

A simple, robust pattern is to keep the real cell content in the DOM (so the table keeps its natural size) and place an absolutely positioned “cover” on top. This preserves layout, allows smooth transitions, and supports keyboard access. It also builds on points from (client-side hiding isn’t secret) and (use CSS to preserve size).

Example structure (place the cover element inside the TD so the cell size is driven by the real content):

<td class="coverable">
  <div class="cell-inner">Answer contents</div>
  <div class="cell-cover" role="button" tabindex="0" aria-pressed="false">Click to reveal</div>
</td>

Core CSS (cover fills the cell and can be faded away without removing the underlying content):

.coverable { position: relative; }
.coverable .cell-cover {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: opacity 200ms ease;
}
.coverable.revealed .cell-cover { opacity: 0; pointer-events: none; }

Small JS to toggle reveal (keyboard-friendly idea shown; expand as needed):

document.addEventListener('click', function(e){
  var cover = e.target.closest && e.target.closest('.cell-cover');
  if (!cover) return;
  var cell = cover.closest('.coverable');
  cell.classList.toggle('revealed');
  cover.setAttribute('aria-hidden', cell.classList.contains('revealed'));
});

Troubleshooting and cautions: if the cover doesn’t size correctly, ensure the TD has position:relative (the example class does this) and consider table-layout: fixed or explicit column widths to avoid reflow. For true secrecy (sensitive data) do not rely on client-side hiding — fetch the value on demand from the server (AJAX) as suggested. For accessibility, keep the cover focusable, support Enter/Space, and update ARIA attributes when toggling.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

If you set the background and font color the same, it will appear to be covered up. Alternatively, you could delete the contents of the cell, and have this value temporarily stored in a hidden input element <input type="hidden" value="#####" /> then use javascript to place the value back when some event happens.

Of course anything you do client side will be visible with client side tools. If you really want to hide the value, you are going to have to make a round trip back to the web server to retreive it. The best way for the user experience would be to retrieve it server side via AJAX.

Member Avatar for Member #120589

but I would like to preserve the size of the cell.

This can be hard-coded as inline property or via css/style.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.