Tips for implementing z-index property on table border

Question

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:

Adjusting the numbers of the z-index property and adding lower z-indexes for related elements
Using .stickyth instead of .stickyth th in the style tag
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?

html css border z-index

Answer 1

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

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 3

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>

Answer 4

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>

Tips for implementing z-index property on table border

Answer №1

Answer №2

Similar questions

Link a function to a button in a 3rd party library

Limit the radio button to being clickable

How can I add a Facebook HTML5 Like Button to AJAX Pages?

Footnote fiascos

The Javascript function I created references a variable that seems to be undefined in the code

Swap Text Inside String - JS

React - Obtain User Login Details and Verify

Exploring CSS shaders in a browser?

Margin challenge in CSS

Is there a way to verify the existence of a specific error in the console?

Problem with the content-editable attribute

Angular backslash is encoded

Achieving priority for style.php over style.css

Issue with jquery .click function not triggering after CSS adjustment

Displaying the number of tasks completed compared to the total number of tasks within a JavaScript ToDo list

Initiate a new line within a flex item

Keep moving the box back and forth by pressing the left and right buttons continuously

Load an external script once the page has finished loading by leveraging the power of $(document).ready() in conjunction with $.getScript()

Modifying the background image of the <body> element in CSS to reflect the season based on the current month in the calendar

Enhancing Image Quality in Internet Explorer 10