Superimpose above the tbody

I am attempting to implement a loading overlay specifically on top of the tbody element. My current method involves adding a tr as the last child of tbody and positioning it using position: absolute, while setting the parent tbody with position: relative.

table {
  width: 100%;
}

tbody {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(200, 200, 200, 0.7);
}
<table>
  <thead>
    <tr>Label</tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
    <tr><td>Data</td></tr>
    <tr class="overlay">
      <td>My custom overlay</td>
    </tr>
  </tbody>
</table>

The desired outcome is for the overlay to only cover the tbody, excluding the thead. Additionally, the overlay should contain specific content (such as a refresh button), so covering every td is not viable.

While my solution functions correctly in Firefox, it encounters issues in webkit browsers. Webkit appears to disregard the position: relative property on the tbody tag, causing the overlay to extend beyond the tbody and cover more than intended.

RESOLVED I was able to resolve this issue by including display: table on the tbody element

htmlcss

Answer №1

One helpful technique is to utilize CSS calc for this task. The support for this feature is quite reliable.

To achieve the desired effect, it's essential to find a balance in the calc property.

Adjust your CSS as follows:

table {
  width: 100%;
  position: relative;
}

.overlay {
  position: absolute;
  top: 25px;
  width: 100%;
  height: -webkit-calc(100% - 25px);
  height: calc(100% - 25px);
  background-color: rgba(200, 200, 200, 0.7);
}

Below is a functional demonstration:

table {
  width: 100%;
  position: relative;
}

.overlay {
  position: absolute;
  top: 25px;
  width: 100%;
  height: -webkit-calc(100% - 25px);
  height: calc(100% - 25px);
  background-color: rgba(200, 200, 200, 0.7);
}
<table>
  <thead>
    <tr><td>Label</td></tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
    <tr><td>Data</td></tr>
    <tr class="overlay">
      <td>My overlay</td>
    </tr>
  </tbody>
</table>

Enhanced solution integrating CSS Calc method.

Answer №2

IMHO: In modern browsers with CSS3 support, applying position:relative to table elements should function correctly. However, it seems that this feature only works in Firefox and not in IE, Edge, and Chrome.

Sources:

https://www.w3.org/TR/css-position-3/#valdef-position-relative

https://www.w3.org/TR/css-position-3/#property-index

Property name: position Applies to: all elements except table-column-group and table-column

https://developer.mozilla.org/en-US/docs/Web/CSS/position#relative Regarding 'stacking context,' although it is not the focus of this discussion

The value position: relative establishes a new stacking context unless z-index is set to auto. Its behavior on table-*-group, table-row, table-column, table-cell, and table-caption elements remains undefined.

Related question:

Bug in most browsers?: Ignoring position relative on 'tbody', 'tr' and 'td'?

Answer №3

Make sure to transfer the position relative from tbody to the table.

table {
  width: 100%;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(200, 200, 200, 0.7);
}
<table>
  <thead>
    <tr>Label</tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
    <tr><td>Data</td></tr>
    <tr class="overlay">
      <td><div>My overlay</div></td>
    </tr>
  </tbody>
</table>
https://i.sstatic.net/VT0RC.png

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

Converting HTML into an image in a Node.js Buffer

Can you suggest a simple method to convert a raw HTML string, like the following: <b>Hello World</b> into a regular PNG image in Node.js Buffer form? I've been exploring various npm packages for a solution that supports this functionali ...

htmlnode.jsnpm

Scraping Data: A guide to extracting width values from CSS style tags using Scrapy and CSS selectors

I've recently started learning scrapy and I'm struggling to extract the width from a div using a CSS Selector. No matter how hard I try, I can only find solutions using xpath instead of css selectors. Here is the HTML code snippet: <div clas ...

csspython-2.7css-selectorsscrapy

Creating a dropdown navigation menu using jQuery

I have been experimenting with creating a customized Drop Down menu using ul li and Jquery, following this helpful Tutorial. Here is the sample HTML Code for testing: <div id="dd" class="wrapper-dropdown-3" tabindex="1"> <span>OS</span> ...

javascriptjqueryhtmlhtml-lists

Background cutting off right side of HTML website

While updating my supervisor's university website, I noticed a problem with the responsiveness. When resizing the browser window, a horizontal scroll bar would appear and the right side of the website would get covered by the background. On mobile dev ...

htmlcss

Styling applied exclusively to the field for mobile devices

As I work on creating a navigation bar using Bulma and Vue.js, I encounter an issue with the dropdown menu behavior. When the navbar collapses into the hamburger menu, the dropdown list remains in display: block; mode. To address this, I attempted a workar ...

cssvue.jsbulma

Encountered a MultiValueDictKeyError in Django at /employeeUpdate/ after making changes to the data

Encountering a django error "MultiValueDictKeyError at /employeeUpdate/ 'id'" after making changes to the data. Here is the code snippet from my views.py: def employeeUpdate(request): id = request.POST['id'] emp_username = requ ...

pythonhtmlcssdjangoweb-applications

Show a div depending on user input

For those with more programming experience than myself, I have a simple question. In Rails, using coffescript, I want to show additional content based on a user's selection. Essentially, if they click on a checkbox, it should reveal an extra field for ...

jquerycssruby-on-rails-4coffeescript

What is the best way to add an additional argument to a Django URL?

In my views.py for page1.html: def spwords(request, spray_id) if request.method == 'POST': value= request.POST["rangeVal"] #### the other argument that I want to pass to views.py of the second page html ... form = forms. ...

htmlpython-3.xdjangodjango-viewspython-requests-html

What is the typical method for preserving a specific gap between two lines when the line spacing surpasses the margin?

My workplace provided me with a wireframe that looks like this: https://i.sstatic.net/Qumru.png Description of the image above: Maintain a margin of 10px between the lines and utilize the specified css class .font16. This is what the .font16 class conta ...

htmlcssmarginline-height

What is the process for changing the output paper size to A4 in React Native (expo android)?

Using React Native to develop an Android app for billing purposes, I encountered an issue with the output paper size being 216mmX279mm instead of the standard PDF size of 210mmX297mm. Utilizing expo-print and printToFileAsync from expo, I aim to achieve a ...

javascriptandroidhtmlcssreact-native

Finding the next div by its ID using jQuery

Currently, the jQuery code provided only allows navigation from the Sport section to the Entertainment section. Is there a way to create a script that allows navigation between any div sections with just one piece of code? <div id="topBar"> &l ...

jqueryhtml

How can I detect a click event on an SVG element using JavaScript or jQuery?

Currently, I am developing a web application that utilizes SVG. However, I have encountered an issue: I am struggling to add a click event to each element within the SVG using jQuery. The problem arises when attempting to trigger the event; it seems like t ...

javascriptjqueryhtmlsvg

Is there a way to access the value of a variable within a loop inside a function and store it in a global variable?

I am struggling to retrieve the value of a variable after it has passed through a loop. I attempted to make it a global variable, but its value remains unchanged. Is there any way to achieve this? Below is my code snippet where I am attempting to access t ...

htmlfunctionvariablesjavascript

Enhance the appearance of the Vaadin Details Expand Icon by customizing the default CSS styling

For my expand/unexpand feature, I am utilizing Vaadin Details. Div contentDiv = new Div(); Label label = new Label("Expand"); Details details = new Details(label, contentDiv); The current output looks like this: https://i.sstatic.net/y8XQC.pn ...

cssvaadinvaadin-flowvaadin14

Tips for repairing buttons in the CSS container

The buttons in the CSS search-box are not staying fixed as intended. They should be within the search box, but instead, they are protruding out of the panel. I attempted to utilize z-index, but it did not produce the desired outcome. https://i.sstatic.n ...

javascriptjqueryhtmlcss

Ways to prioritize HTML5/CSS3 navigation menu above the content

I am attempting to position my navigation menu on top of the content. Despite using z-index and overflow = visible, the desired effect is not achieved. I want to avoid setting the position relative as it will push the content downwards. Simply put, I want ...

htmlangularjscss

MYSQL Query Failing to Retrieve Data

Currently, I am working on my social network project, and I am facing an issue where the profile picture and writer's name do not display when a post is shown on the newsfeed. Here is the code snippet that I am using: $owner_id=mysql_result($result,$ ...

phpmysqlhtml

What could be causing transition to not be recognized as an element in HTML?

<template> <header> <nav class="container"> <div class="branding"> <router-link class="header" :to="{name : 'Home'}">>FireBlogs</router-link> </div& ...

javascriptcssvue.js

The issue of video tags not displaying previews on iPhone across all browsers is also accompanied by problems with controls not functioning correctly

As I delve into the world of HTML5 video tags, I encountered an issue where the video wouldn't show a preview frame initially. Instead, only the Resume button would appear. Furthermore, after playing the video with the Resume button, it wouldn't ...

javascripthtmljquerycssvideo

Utilize the jQuery autocomplete UI Widget to trigger a select event on a dynamically generated row in a table

Currently, I have successfully implemented a jQuery autocomplete feature on the text input of a table data element called txtRow1. The data for this autocomplete is fetched remotely from a MySQL database and returned in JSON format as 'value' for ...

javascriptjqueryhtmljquery-ui