Tips for implementing z-index property on table border

I am encountering an issue with an html file that contains a table. The table has one row element with the css property of position: sticky, while the other rows are just example rows with "some text" in each cell.

Within column 5 of the regular rows, I have added a purple tag to each cell, as shown in the first picture. Despite setting the z-index to 3 for the first row, the purple tag is still visible at the border of the table, as seen in the second picture.

I have tried various solutions to address this issue:

  1. Adjusting the numbers of the z-index property and adding lower z-indexes for related elements
  2. Using .stickyth instead of .stickyth th in the style tag
  3. Adding additional div tags within the first row and the purple tag

Unfortunately, none of these attempts have been successful in achieving the desired result. How can I ensure that the purple tag appears under the table border of the first row?

htmlcssborderz-index

Answer №1

It appears a bit peculiar, but the border seems to scroll even when the element itself is contained within another sticky element that remains stuck.

This code snippet implements a slightly unconventional solution by adding a left side border with a light grayish color to each "th". By applying it to all "th" elements, including the 5th one, they all appear uniform in style.

The after pseudo element doesn't scroll, allowing the purple sections to be displayed correctly underneath.

tr.stickyth th:nth-of-type(n)::before {
  content: '';
  position: absolute;
  width: 0.5px;
  height: 100%;
  top: 0;
  left: -1px;
  background-color: #eeeeee;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
    <style media="screen">
      body {font-size: 120%;}
      td, th {text-align: center;}
      .stickyth th {position: sticky; top: -1px; background: #ccc; z-index: 3;}
      .col5-out {position: relative; z-index: 2;}
      .col5-inner {background-image: linear-gradient(135deg, #6303B1, #ff0099); max-width: 25%; left: -22px; border-radius: 25%; transform: rotate(-23deg); top: -11px; position: absolute;}
      .col5-content {font-size: 75%; padding: 1px 6px;}
    </style>
  </head>
  <body>
    <table class="table table-bordered table-striped table-hover">
            <tr class="stickyth">
              <th>column 1</th>
              <th>column 2</th>
              <th>column 3</th>
              <th>column 4</th>
              <th>column 5</th>
              <th>column 6</th>
              <th>column 7</th>
              <th>column 8</th>
            </tr>
        <!-- Remaining table rows and cells omitted for brevity -->
      </table>

  </body>
</html>

Answer №2

If you remove the border by setting it to 0 pixels, you will eliminate the gap:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
    <style media="screen">
      body {font-size: 120%;}
      td, th {text-align: center;}
      .stickyth {background: #FFF;}
      .stickyth th {position: sticky; background: #ccc; top: -1px; z-index: 3; border: 0}
      .col5-out {position: relative; z-index: 2;}
      .col5-inner {background-image: linear-gradient(135deg, #6303B1, #ff0099); max-width: 25%; left: -22px; border-radius: 25%; transform: rotate(-23deg); top: -11px; position: absolute;}
      .col5-content {font-size: 75%; padding: 1px 6px;}
    </style>
  </head>
  <body>
    <table class="table table-bordered table-striped table-hover">
            <tr class="stickyth">
              <th>column 1</th>
              <th>column 2</th>
              <th>column 3</th>
              <th>column 4</th>
              <th>column 5</th>
              <th>column 6</th>
              <th>column 7</th>
              <th>column 8</th>
            </tr>
            <tr class="not-sticky">
              ... (omitted for brevity) ...
            </tr>

      </table>

  </body>
</html>

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

CssLint detected an unfamiliar property: "fill"

Currently, I am updating the color of an SVG path using CSS: .compute .svg path { fill: #fff; } The functionality is working properly, however, during a CSSLint check, I received this warning: Unknown property: "fill" I am unsure if this is an erro ...

csssvgcsslint

Exploring the distinction between absolute elements nested within other absolute elements and relative elements nested within absolute elements

My latest CSS experiment involved creating a flag of a country. Check out my code: div.flag { width: 900px; height: 600px; background-color: red; position: relative; } div.flag > div { position: absolut ...

htmlcssweb

Discover the country's three-letter code with the power of HTML and Javascript!

I am in search of a way to determine the location of a user based on the country they are browsing from. I want to achieve this using HTML and Javascript. While researching on stackoverflow, I came across various suggestions to use different API's for ...

javascripthtmlajaxgeolocationreverse-geocoding

Attaching an SVG chart to a node causes it to malfunction, indicating a fundamental element is absent

I've been attempting to display a d3fc graph on an svg node within my react.js component and return the entire structure. However, it crashes when I try to apply .datum(my_data) to the d3 selection. I suspect that I'm overlooking something fundam ...

htmlreactjsd3.jssvgd3fc

Issues arise when trying to integrate iframes with Ionic and AngularJS, as they

Using iframes in my ionic app to display webpages within the application has presented a challenge. This is what I currently have implemented: <iframe class= 'webPage' name= "eventsPage" ng-src="{{object.url}}"></iframe> The issue ...

angularjshtmliframeionic-framework

Issue with Bootstrap navigation bar not displaying on iPad devices

Currently, I am working on creating a custom bootstrap menu that displays properly on an iPad screen size. I have implemented the standard navbar code from Bootstrap with a few tweaks. While it works well on smartphones and laptops, the issue arises when ...

htmlcsstwitter-bootstrapipad

Is it possible to remove strings within HTML elements?

{% for term in terms %} <div class="term term-count-{{loop.index}}"> <b>{{ term }}</b>: &nbsp;&nbsp; {{ terms[term] }} &nbsp;&nbsp; </div> {% endfor %} 'terms' is a dictionary w ...

pythonhtmlcssflaskjinja2

Display each value in a foreach loop just a single time

Utilizing a foreach loop to store error messages from invalid user inputs in an array, converting it into a string, and displaying them on another page. However, although the string is successfully displayed, it appears multiple times. This snippet showca ...

phphtmlregistration

Combining the p class with flexbox for optimal layout design

I have four flexed container boxes and I am looking to add text below them in a row. Does anyone have suggestions on how I can achieve this alignment, as well as tips for optimizing the code? .container { display: flex; flex-direction: row; just ...

htmlcsstextflexbox

"Is there a way to transfer a value from one list box to another without needing to refresh the page, by utilizing AJAX,

Is there a way to automatically load Related Course levels in the Course Level Listbox when selecting a Course from the Course list? <script type="text/javascript" src="js/jquery.js"></script> <div>Course:<select name="course_id" id= ...

javascriptphpjqueryhtmlajax

Using a variety of images to fill various shapes on a grid canvas

I'm currently working on creating a hexagonal grid using canvas, with the goal of filling each tile with a unique pattern taken from an image. However, the code I have written seems to be applying the same image pattern to every tile in the grid, resu ...

javascripthtmlcanvashtml5-canvas

<div class="firstHeaderClass"> What exactly is this?

Struggling to eliminate a recurring header across all my webpages for customization, I've hit a roadblock in identifying the source of this repeating header. Upon stumbling upon this code snippet in the header section, my efforts to decipher its ...

phphtmlcssheader-files

What is the best way to display the tabcontent when clicking on a menu tab in this code, as neither method seems to work?

Take a look at my JSFiddle demo: <http://jsfiddle.net/xrtk9enc/2/> I suspect that the issue lies within the javascript section. My html code includes an Unordered List that serves as the tab menu. Each href of the menu corresponds to a tab content, ...

javascripthtmlcss

Reactjs: When components are reused, conflicts may arise in UI changes

I'm currently working on creating a sample chat room application using reactjs and redux for educational purposes. In this scenario, there will be 3 users and the Message_01 component will be reused 3 times. Below is the code snippet: const Main = Re ...

javascripthtmlcssreactjsredux

The Vue2 @click event does not function properly when using v-html within a different component

I currently have a sign up form that includes an Alert component for displaying any errors. One of the conditions may prompt a message saying "You already have an account, click here to log in". The error messages are passed as props to the "Alert" compon ...

javascripthtmlvue.jsvuejs2

The Parent Div is styled with a background color, and I would like the sub div to inherit the background from whatever is behind the

I have a website at . When you click on a blue tab (except the middle left one), a larger tab appears with two Divs inside. What I am trying to achieve is having the sub divs show what's behind the green Div, especially while it's in motion. This ...

htmlcssbackgroundtransparency

Adapting CSS grid columns based on device screen size

I am currently experimenting with CSS grid to create a layout that changes based on different screen sizes. Here is what I want to achieve: On a mobile screen, there should be one column that takes up the entire width. This column consists of two sections ...

htmlcssresponsive-designcss-grid

Is it possible to achieve a seamless change using show/hide jQuery functions when hovering over an

How can I achieve smooth transitions when using an image map to show a div on hover, similar to the functionality seen on this website: ? Below is my current JavaScript code: var mapObject = { hover : function(area, event) { var id = area.attr ...

javascriptjqueryhtmltransition

Use JQuery to constantly monitor for any changes in HTML Div

I am dealing with a browser-based chat application where separate div elements are generated for each chat conversation. An external module oversees the entire chat process, and I do not have access to its underlying code. It is important to note that the ...

jqueryhtmlcssdom

Settings for the packaging of web components

Is there a way to configure a web component in vue.config.js and separate the iconfont.css section when building? I am using the vue-cli-service build --target wc-async --name chat-ui src/views/Chat/Launcher.vue --report command to package the web compon ...

cssvue.jsweb-componentfont-facevue-cli