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

Position the Radio Buttons on Top of the Image

I need assistance with positioning radio buttons on top of an image at a specific location. Both the image and radio buttons are currently in a Div container, but I am unsure about the next steps. Below is where I would like to place the radio buttons (red ...

htmlcss

Upon hitting submit, the form remains unresponsive

I have been developing a permissions system for my NodeJS project (Using the SailsJS MVC) and encountered an issue. After resolving my initial error as detailed here, I am now facing a problem where the form is unresponsive. It neither shows an error in th ...

javascripthtmlangularjsnode.jssails.js

Transferring canvas element via socket with JS stack size limit

I'm encountering an issue where I need to transfer a canvas element over sockets using socket.io and Node.js. The code snippet below illustrates my approach: var myCanvas = document.getElementById("myCanvas"); var ctx = myCanvas.getContext("2d"); // ...

javascripthtmlsocket.iohtml5-canvas

Issue with automatic sorting of prices for products on the shopping platform, along with difficulty in retrieving accurate product details

Part of a script that tracks prices: # Imported libraries import pandas as pd from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.keys import Keys from selenium.webdriver.support.ui import WebDriverWait ...

htmlpython-3.xselenium-webdriver

What is the best way to style an icon in CSS?

I am facing an issue with the following code snippet: <span class="stars">★★☆☆☆ </span> My objective is to style the empty stars differently, but I am unsure how to specifically target them. The following CSS rule does not produc ...

javascriptjquerycsswordpressicons

Sharing Variables with $(document).ready

I need help understanding why this code is not functioning and how I can fix it. Despite my efforts to use namespaces and IIFEs, I am still unable to make it work. $(document).ready(function() { alert (hi); }); $(document).ready(function() { var hi = ...

javascriptjqueryhtml

Tips for using JavaScript to style an array items individually

I have currently placed the entire array within a single div, but I would like to be able to display each element of the array separately so that I can style "date", "title", and "text" individually. This is my JSON structure: [ { "date": "Example ...

javascripthtmlcssjsonfetch-api

tips for expanding the size of your images

Hey there, I'm looking for some help with the code below. I need to increase the width of the images and remove the border of the slider div which is currently showing a white border that I want to get rid of. I am using JavaScript to display the imag ...

jqueryhtmlcss

slow loading background slideshow in css

Creating a simple slideshow for the background using CSS has been successful, but I am facing an issue with making all backgrounds utilize background-size: cover. I want the images to fit properly on the screen. Another problem is that the pictures take a ...

javascripthtmlcsskeyframe

Duration of Animated Text

Despite trying various methods, I'm struggling to adjust the duration of my animations. I want each animated text to be displayed for 2-3 seconds, as they are currently moving too quickly. How can I resolve this issue? Please note that the specific pl ...

csscss-animations

Having trouble removing or adding a class to an HTML element?

I have a collection of three colored buttons. My goal is to allow users to select one button at a time, triggering it to be highlighted while the others are unselected. Each button corresponds to an object with a property called isSelected that can be set ...

javascripthtmlcss

Issues with displaying AngularJs directive template

Having an issue with my AngularJs directive. Everything works perfectly fine when I use the "template" attribute, but when I switch to using "templateURL", it stops working. Both the JavaScript file for the directive and the HTML file for the template are ...

javascripthtmlangularjs

Utilizing JQuery to differentiate a single element within a group of elements

As a beginner in the world of jquery, I am attempting to assign a font awesome icon star (fa-star) to differentiate between admins and regular members within the group members bar. The usernames have been blurred out for privacy reasons, but my goal is to ...

javascriptjqueryhtmlcss

setting a div element to occupy a percentage of the window's height using viewport height units (vh) within the Wordpress platform

this is the desired appearance but upon pasting the identical code: <!-- placeholder div --> <div style="height:100px;"> </div> <!-- outer container div (with specified height) --> <div style="height:80vh;"& ...

htmlcsswordpressresponsive-design

Implementing JavaScript validation to alter the background image

I encountered a small issue while working on my project. I was designing a form in HTML using JavaScript, and for the input fields, I decided to use a background image with padding on the left to enhance its appearance. Everything seemed fine until I ran i ...

javascripthtmlcss

What could be causing my AJAX form to refresh the page upon submission?

I have been working on a basic Follow/Unfollow system, and although the functionality is working correctly in terms of inserting and deleting rows when following/unfollowing, I'm facing an issue where the page refreshes every time despite using e.prev ...

javascriptphphtmlajax

What is the best way to load content into Bootstrap tabs?

I would like to incorporate a loading spinner within the bootstrap tabs. When a user clicks on a tab pane link, a loading spinner will be displayed for a few seconds before showing the actual tab content. HTML : <ul class="nav nav-tabs" id=&q ...

javascripthtmljquerycssbootstrap-5

JQuery Reveals AJAX Request with Malfunctioning HTML Markup

I have been working on parsing an XML file and displaying the output in a div. However, I've encountered an issue where the .append() function is not generating the expected HTML output. Below is the JQuery code snippet I am using: var container = $ ...

jqueryhtmlajaxappend

ShadCn UI ResizablePanelGroup effortlessly grows within the available area without the need to set a specific height

I'm facing a CSS challenge with the ResizablePanelGroup component. My layout includes a header and a ResizablePanelGroup with 4 panels. The page should take up 100% of the viewport height, and I want other components to be placed within it. Once the H ...

cssnext.jstailwind-cssshadcnui

Is it feasible to have content wrap around a Grid-Item?

I've been experimenting with the new CSS Grids layout module to arrange my content. I have a set of paragraphs that are 8 columns wide, and I'm looking to insert a figure that spans 3 columns in columns 1-3. After that, I want the following parag ...

htmlcsscss-grid