What is the best way to position a div in relation to a table header (th) but not inside it?

I'm trying to create a table header that displays a help text (div) when clicked on. However, the help div is causing the table header to be larger than the other headers.

Below is the code snippet:

#help_box {
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.77);
    padding: 10px;
    color: white;
    font-size: 12px;
  }
<body>
    <!--Content of the site-->
    <div id="contentv2">
    
      <div id="highlight">
        <table>
          <tbody>
            <tr>
              <th valign="center" style="min-width: 130px;">Stock</th>
              <th valign="center" style="min-width: 70px;">Price</th>
              <th valign="center" style="min-width: 70px;">Variation<div id="help_box" align="justify">The period of oscillation is a random text. To make sure it's the same size as last week (until Sunday 23:59).</div></th>
            </tr>
          </tbody>
          <tbody>
            <tr><td style="font-size: 16.66px;">First row</td><td style="font-size: 16.66px;">$75.50</td><td align="right" style="font-size: 16.66px;color:red">-0.66%</td></tr>
            <tr><td style="font-size: 16.66px;">Second row</td><td style="font-size: 16.66px;">$66.50</td><td align="right" style="font-size: 16.66px;color:red">-0.66%</td></tr>
            <tr><td style="font-size: 16.66px;">Third row</td><td style="font-size: 16.66px;">$56.50</td><td align="right" style="font-size: 16.66px;color:red">-0.66%</td></tr>
          </tbody>
        </table>
      </div>
    </div>

What I want is for the help box to appear right below the header and overlap the rows below without affecting the size of the table header.

htmlcsshtml-tableorientation

Answer №1

In order to correctly position your #help_box div, it is important to use the CSS rule position: absolute. This will allow you to adjust its placement using properties like left, right, top, and bottom.

If you want the positioning of the div to be relative to the table rather than the entire page, be sure to apply the CSS rule position: relative to the table.

Answer №2

It looks like you're looking for a way to control the size of a menu while ensuring that its contents fit within the width of the header. Here is some CSS code that might help achieve this:

#help_box {
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.77);
  padding: 10px;
  color: white;
  position: absolute;
  font-size: 12px;
}
<body>
  <!--The content of the site-->
  <div id="contentv2">

    <div id="highlight">
      <table>
        <tbody>
          <tr>
            <th valign="center" style="min-width: 130px;">Stock</th>
            <th valign="center" style="min-width: 70px;">Price</th>
            <th valign="center" style="min-width: 70px; position: relative">Variation<div id="help_box" align="justify">The period os ocilation is a random text. To make % of it is is the same size and the last week (until Sunday 23:59).</div></th>
          </tr>
        </tbody>
        <tbody>
          <tr><td style="font-size: 16.66px;">The first row</td><td style="font-size: 16.66px;">$75.50</td><td align="right" style="font-size: 16.66px;color:red">-0.66%</td></tr>
          <tr><td style="font-size: 16.66px;">The second row</td><td style="font-size: 16.66px;">$66.50</td><td align="right" style="font-size: 16.66px;color:red">-0.66%</td></tr>
          <tr><td style="font-size: 16.66px;">The third row</td><td style="font-size: 16.66px;">$56.50</td><td align="right" style="font-size: 16.66px;color:red">-0.66%</td></tr>
        </tbody>
      </table>
    </div>
  </div>

Answer №3

Appreciate the assistance! Here is the snippet below:

#custom_box {
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.8);
  padding: 8px;
  color: black;
  font-size: 14px;
  position: relative;
  top: 20px;
}
<body>
  <!--Content goes here-->
  <div id="contentv2" style="position: absolute">

    <div id="highlight">
      <table>
        <tbody>
          <tr>
            <th valign="center" style="min-width: 120px;">Product</th>
            <th valign="center" style="min-width: 60px;">Price</th>
            <th valign="center" style="min-width: 80px;">Change
              <div id="custom_box" align="left">The fluctuation varies throughout different days. To keep it consistent, a percentage comparison is made based on last week's data (until Sunday 23:59).</div>
            </th>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td style="font-size: 16px;">First item</td>
            <td style="font-size: 16px;">$45.75</td>
            <td align="right" style="font-size: 16px;color:green">+1.20%</td>
          </tr>
          <tr>
            <td style="font-size: 16px;">Second item</td>
            <td style="font-size: 16px;">$37.25</td>
            <td align="right" style="font-size: 16px;color:red">-0.85%</td>
          </tr>
          <tr>
            <td style="font-size: 16px;">Third item</td>
            <td style="font-size: 16px;">$28.50</td>
            <td align="right" style="font-size: 16px;color:red">-0.95%</td>
          </tr>
        </tbody>
      </table>
    </div>
  </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

Styling an HTML table with two columns: one column displaying an image, and the other column containing information related to the image

I have a concept that involves creating a table with 2 columns. The left column will feature an image, while the right column will display data about the image in 6 rows. ________________________________ | |_______________| | | ...

phphtmlcsshtml-table

Issue with floating navigation bar functionality when resizing the page

After much tinkering, I have managed to create a floating navigation bar for my website. Most of the time, it works perfectly fine, but there's an issue when the window size is adjusted in the floating mode. Take a look at the image below for referenc ...

javascripthtmlcssnavigationbar

Enhancing the appearance of an image upon hovering in ReactJS: A step-by-step guide

My issue arises from my desire to border an image and display a Card with information upon hovering, but the problem is that this style is being applied to all images rather than just the one being hovered over. After pulling data from a movie API, I stor ...

cssreactjsreact-hooks

Setting a page title using PHP based on a conditional statement can be achieved by

I am attempting to display a different title for each page In the header.php file, I am checking the file name to set the correct title like this <?php $page = basename($_SERVER['PHP_SELF']); if ($page == 'index.php'): ?> <ti ...

phphtml

Guide on updating a MongoDB document upon clicking a button on an HTML page

I'm new to backend development and I've been working on creating a CRUD notes application without using React or EJS. My current issue is that I am unable to edit documents. The desired functionality is for the user to be directed to a page wher ...

javascripthtmlnode.jsexpressmongoose

exploring numerous boxes in an engaging and educational tutorial

Explaining this in the title was a bit tricky, but what I want to create is an interactive tutorial. In this tutorial, the user will click on an area or product they want to clean or use for cleaning. After clicking, another box with relevant information w ...

javascriptjqueryhtmlinteractivebox

The width property is not being passed down to the table

I'm experiencing difficulties with the scaling of my body content. When the page is initially opened, it scales to 100%. However, when I resize the screen to make it wider, the content gets bigger but when I try to make it smaller again, it remains a ...

htmlcssnetsuite

Modify the transition and design of two progress bars

I'm having an issue with merging two Bootstrap progress bars into one. Initially, the first progress bar appears when the page loads and hides after data is loaded. At the same time, the second progress bar shows up. However, the transition animation ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

What reasons could explain why the more efficient approach of offering an initial portion of data is not faster in practice?

My website contains numerous pages with a plethora of small images that need to be loaded. To enhance user experience, I devised two methods to first display a subset of the content without waiting for the entire page to load. The data is stored in a .json ...

jqueryhtmljson

Advantages of passing individual variables instead of the entire object from HTML to JavaScript in AngularJS

When it comes to passing the iterating object from HTML to Javascript, there are two approaches that can be taken. The first approach involves passing the iterating object as a whole, while the second approach only passes the required properties of the obj ...

javascripthtmlarraysangularfor-loop

The ability to use the backspace and Ctrl + c (Copy) functions is restricted in input fields on FireFox

I have a form with input fields designed using semantic UI. I need the input field to only accept numbers, remove spaces, and allow copying from it using ctrl +c. After some investigation, I found this jQuery code that seems to satisfy my requirements per ...

jqueryhtmlregexfrontendsemantic-ui

Determine the number of rows in the Tabulator's table

Can anyone tell me how to retrieve the number of rows in a table created using Tabulator on a website? Is there a method like table.size or table.length that I can use for this purpose? The table has been initialized with the following code: table = new T ...

javascripthtmlcssjsontabulator

Is it possible to impose a different style on an element from another culture?

I am currently developing a themes library along with a demo page. The challenge I'm facing is that the demo page needs to showcase styles from the library without using all of the elements. For instance, consider the following style in an external s ...

javascripthtmlcss

Using the onclick attribute as a unique identifier for a button

I am currently facing a challenge with a form that does not have an ID Here is the code snippet in question: <button class="btn btn-primary" onclick="showModal()" type="button">Browse Data</button> Unfortunately, I don't have any contro ...

javascriptjqueryhtml

The MediaSource API is not supported on Chrome 27

My current browser version is Chrome 27, and based on this source, it is indicated that the MediaSource API comes pre-installed. However, upon further examination on the same page, the test section states that Your browser does not support the MediaSource ...

javascripthtmlhtml5-videowebrtcmedia-source

Accessing getUserMedia within Internet Explorer 11 or utilizing MediaStream on IE 11

I am attempting to utilize the getUserMedia function in IE 11 with the help of the temasys plugin. However, IE does not support the MediaStream instance returned by getUserMedia. Below is a snippet of my code: import React from 'react' import { ...

javascripthtmlreactjsinternet-explorer-11temasys

Having trouble accessing the link from the dropdown list in Selenium

While trying to select a link from a dropdown menu, I am facing an issue with Selenium. The element is being located successfully, but it cannot be interacted with and the following exception is thrown: Error in thread "main" org.openqa.selenium.ElementNo ...

javahtmlseleniumselenium-webdriverselenium-iedriver

Incorporating Anchors for Seamless Navigation in Menus

My website has various sections on the homepage and I want to add an anchor link to the navigation. This will allow users to scroll down to a specific section, like "About Us," when clicking on the appropriate nav link. I also need the anchor link to work ...

htmlcssnavigationanchor

Is there a way to make all DIVs in the same class have the same height as the tallest div?

I have 3 identical divs with an auto height value. How can I set the height of all divs in the same class to be equal to the highest div's height? Same Class Div Thank you in advance. ...

htmlcss

How can I include multiple search forms on a single page in TYPO3 Ke_Search without any conflicts between them?

In the header of my website, I have a search form that is generated as a cObject from a content element containing a ke_search searchbox. When this form is submitted, it redirects to a /search page. In addition to this, I have subpages that are meant to se ...

htmlsearchtypo3content-management-systemtyposcript