The placement is based on its relative position within the table row layout

I am trying to create a table using div elements styled with table CSS. One of the rows contains an absolutely positioned div, but setting position:relative; on the row element doesn't work as expected.

Here is my table layout without attempting to lock the row.

View table without locked row on jsfiddle

When I set the row locker div to display:block, it breaks out of the table row completely.

(See code below for reference)

Setting the divRow class to display:block instead of display:table-row puts the row blocker div where I want it, but it causes all columns to shift left due to losing the table-row functionality.

View table with divRow set to block on jsfiddle

Below is the code I have been using to experiment with this issue:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .divTable{
          display:table;         
          width:auto;
          position: relative;              
        }
        .divRow{
          display:table-row;
          width:auto;
          clear:both;
          position: relative;
          overflow: hidden;
        }
        .divCell{
          display:table-cell;
          padding: 3px;        
          vertical-align: top;
          position: relative;
        }
        .locked_row
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="main_content">
       [Table content here]
    </div>
</body>
</html>

Answer №1

Here's a couple of suggestions

#1 - Clear cell text and change background color (simplest option)

  • To hide the text in locked cells, use text-indent: -9999px

  • Add "Locked" text with a pseudo element using position: absolute. Use left: 9999px to move the text back into view.

  • Set cells to have position: relative

Example Code

.divTable {
  display: table;
  width: auto;
}
.divRow {
  display: table-row;
  width: auto;
  clear: both;
  overflow: hidden;
}
.divCell {
  display: table-cell;
  padding: 3px;
  vertical-align: top;
}
.divRow:nth-child(even) {
  background-color: rgb(221, 221, 221);
}
.divRow:nth-child(odd) {
  background-color: rgb(255, 255, 255);
}
.lockedRow > div {
  background: #F00;
  text-indent: -9999px;
  position: relative;
}
.lockedRow > div:first-child:after {
  content: 'Locked Row';
  display: block;
  position: absolute;
  left: 9999px;
  top: 0;
  }
<div id="main_content">
...

#2 - Overlaying the row

This technique works well when applied to children elements within each cell.

Add a locked class to the row and create a lock overlay using a pseudo element on .divCell:

.lockedRow > div:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

Make the cells in the locked row have a relative position:

.lockedRow > div {
  position: relative;
}

You can display the locked message through the first cell of the row:

.lockedRow > div:first-child:after {
  content: 'Locked Row';
}

Apply alternating row colors using nth-child:

.divRow:nth-child(even) {
  background-color: rgb(221, 221, 221);
}
.divRow:nth-child(odd) {
  background-color: rgb(255, 255, 255);
}

Working Example

.divTable {
  display: table;
  width: auto;
}
...
<div id="main_content">
...

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

Data modifications in polymer are not being accurately displayed

I need help with hiding/unhiding a UI element using a button in Polymer. Despite having the necessary elements and code set up, it is not working as expected: <button id="runPredictionButton"> <i>Button text</i> </button> <p ...

The form will not pass validation

The validation of my form is not working correctly, as all my functions are called when the submit button is clicked. // Main Function function validate_form(form) { var complete = false; // Ensure that only one error message is displayed at a ti ...

How can you style a radio button in CSS while displaying a label next to it?

Trying to customize a radio button and align its label next to it using CSS has proven to be more challenging than expected. The current setup is not producing the desired outcome as the radio button appears distorted and the label is not perfectly inline ...

Mysterious Chrome glitch causes SVG element to shift down by 2 pixels

I am currently facing an issue with creating image links from an SVG spritesheet that is causing cross-browser problems between Chrome, Safari, and Firefox. Here are some of the anchor tags I am using: <a href="#" id="twitter-logo" class="socialIcon"&g ...

Navigating through child elements within a div using JavaScript

I recently coded a div using this snippet... let sidebarBox = document.createElement("div"); sidebarBox.id = "sidebarBox"; ...and then I created a second div like so... let sidebarAd = document.createElement("div"); sidebarAd.className = "sidebarAd"; B ...

Scroll automatically to the following div after a brief break

On my website, the title of each page fills the entire screen before the content appears when you scroll down. I am interested in adding a smooth automatic scroll feature that will transition to the next section after about half a second on the initial "ti ...

Buttons are misaligned and do not align on a straight line

Below is the code output: https://i.stack.imgur.com/avhUu.png I am attempting to enhance the symmetry of these buttons. The minus (-) button appears slightly smaller than the plus (+) button even though they have the same padding. I have experimented w ...

The process of automating CSS testing

We are currently in the process of developing a website using SharePoint 2010 for a client who already has an existing PHP website. We are working to ensure that the front end of the new site matches the styling of the client's current PHP site, speci ...

Form comments in Bootstrap are causing rows to shift

Currently, I am working on an Angular-powered horizontal form that utilizes various bootstrap components. However, I have encountered an issue with a "Comment field" that is causing the adjacent columns to shift downwards. I initially suspected the problem ...

What could be causing the concave walls in my ray casting engine when applying fisheye correction?

As I work on creating a ray casting engine using HTML Canvas, I encountered the fisheye effect issue. Most online resources suggest multiplying the ray's length by the cosine of its angle from the player to correct this problem. distance * Math.cos( ...

Tips for preventing the appearance of two horizontal scroll bars on Firefox

Greetings, I am having an issue with double horizontal scroll bars appearing in Firefox but not in Internet Explorer. When the content exceeds a certain limit, these scroll bars show up. Can someone please advise me on how to resolve this problem? Is ther ...

Choosing an HTML element based on its specific class is a breeze with these simple steps

Looking to add some CSS styles to a tag that has a particular class? One example is selecting the article tag with the news class. <article class="news"> <div>some content</div> </article> ...

CSS causing black bars to appear when image is moved

I recently started working with HTML/CSS and JS, but I've encountered a small issue. I'm using the bootstrap carousel and it's functioning well, but when I try to move the image higher up, black bars appear at the bottom as if my images are ...

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

My CSS animation looks like this: HTML: <div class="container" id="cont"> <div class="box show"></div> </div> CSS: .container { width: 100vw; height: 100vh; } .box { position: absolute ...

Utilize CSS to align text to the right with floating properties

I have devised the following: Now, I want the 'independent' section at the top to be aligned to the right like the 'interactive' section. I attempted to use float: right; but it didn't work. Here is my code: .badgesblock{style: ...

Tips for utilizing sorting, searching, and pagination features in Bootstrap 5 tables

In my simple table, https://i.sstatic.net/bu1md.png Furthermore, I have integrated Bootstrap 5: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15777a ...

Troubleshooting a problem with HTML table styling

Could someone please help me identify the issue with this code snippet? I am aiming to style the table with a border, background color, and align it to the top. I appreciate any assistance. Thank you. <td style="border: solid 2px #111111;" bgcolor="#d ...

Show secret information once radio button is selected through JQuery code

I am dealing with two checkboxes ABC XYZ When the ABC checkbox is checked, the abc content div is displayed, and when the XYZ checkbox is checked, the xyz content div is shown. Everything works fine, except that if the ABC checkbox is checked by defaul ...

Changing the tooltip background color in FullCalendar 6 and Bootstrap 5: A step-by-step guide

My FullCalendar agenda displays events with colored backgrounds. However, I want the tooltips for these events to have matching background colors as well. Currently, the tooltips always show up with a black background. Is there a way to dynamically change ...

Execute a function on a canvas timer using the setTimeout method

I'm having an issue with my setTimeout function in this code. I want it to call a timer function for a delay, but it's not working consistently every second. Why is that happening? <head> <script> function timer(sec) { var c = do ...