What can be done to stop a header from sticking to a table and displaying horizontally scrolling content along the border?

Question

What can be done to stop a header from sticking to a table and displaying horizontally scrolling content along the border?

I need to ensure that the red headers do not overlap with the blue headers' borders while scrolling horizontally. It is essential for me to have a white border on the blue headers.

.container {
  overflow: auto;
  width: 200px;
}

table {
  border-collapse: collapse;
}

th {
  background-color: red;
  border-right: 1px solid white;
  color: white;
  padding: 10px;
  z-index: 1;
}

.sticky {
  background-color: blue;
  position: sticky;
  z-index: 2;
}

.test1 {
  left: 0;
}

.test2 {
  left: 57px;
}

.test3 {
  left: 114px;
}

<div class="container">
  <table>
    <thead>
      <tr>
        <th class="sticky test1">
        Test1
        </th>
        <th class="sticky test2">
        Test2
        </th>
        <th class="sticky test3">
        Test3
        </th>
        <th>
        Test4
        </th>
        <th>
        Test5
        </th>
        <th>
        Test6
        </th>
      </tr>
    </thead>
  </table>
</div>

I need help in ensuring that the red headers do not intrude into the border of the blue headers when scrolling horizontally. The presentation of having a white border around the blue headers is crucial for me.

html css

Answer 1

Answer №1

If you want to achieve a border effect without actually using borders, one trick is to remove all borders and utilize CSS pseudo-elements on each header cell.

Furthermore, it's recommended to set fixed widths for your sticky columns so that adjusting the left property becomes simpler. I had encountered slight shifts in alignment (~1px) while scrolling horizontally until I used the exact width for my sticky columns.

.container {
    overflow-x: auto;
    width: 200px;
}

table {
    border-collapse: collapse;
}

th {
    background-color: red;
    color: white;
    padding: 10px;
    position: relative;
}

.sticky {
    background-color: blue;
    position: sticky;
    z-index: 1;
}

th::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    /* Adjust fake border width here */
    height: 100%;
    background-color: white;
}

.test1 {
    left: 0;
}

.test2 {
    left: 55.86px;
    /* this is the exact width of the column header */
}

.test3 {
    left: calc(55.86px * 2);
    /* made this exact to stop the tiny shifts when scrolling */
}

<div class="container">
    <table>
        <thead>
            <tr>
                <th class="sticky test1">
                    Test1
                </th>
                <th class="sticky test2">
                    Test2
                </th>
                <th class="sticky test3">
                    Test3
                </th>
                <th>
                    Test4
                </th>
                <th>
                    Test5
                </th>
                <th>
                    Test6
                </th>
            </tr>
        </thead>
    </table>
</div>

Answer 2

If you want to achieve a border effect without actually using borders, one trick is to remove all borders and utilize CSS pseudo-elements on each header cell.

Furthermore, it's recommended to set fixed widths for your sticky columns so that adjusting the left property becomes simpler. I had encountered slight shifts in alignment (~1px) while scrolling horizontally until I used the exact width for my sticky columns.

.container {
    overflow-x: auto;
    width: 200px;
}

table {
    border-collapse: collapse;
}

th {
    background-color: red;
    color: white;
    padding: 10px;
    position: relative;
}

.sticky {
    background-color: blue;
    position: sticky;
    z-index: 1;
}

th::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    /* Adjust fake border width here */
    height: 100%;
    background-color: white;
}

.test1 {
    left: 0;
}

.test2 {
    left: 55.86px;
    /* this is the exact width of the column header */
}

.test3 {
    left: calc(55.86px * 2);
    /* made this exact to stop the tiny shifts when scrolling */
}

<div class="container">
    <table>
        <thead>
            <tr>
                <th class="sticky test1">
                    Test1
                </th>
                <th class="sticky test2">
                    Test2
                </th>
                <th class="sticky test3">
                    Test3
                </th>
                <th>
                    Test4
                </th>
                <th>
                    Test5
                </th>
                <th>
                    Test6
                </th>
            </tr>
        </thead>
    </table>
</div>

Answer 3

Answer №2

To make this happen, simply incorporate a box-shadow into your sticky class like so:

.sticky {
    ....
    box-shadow: 2px 0px 0px white;
}

Answer 4

To make this happen, simply incorporate a box-shadow into your sticky class like so:

.sticky {
    ....
    box-shadow: 2px 0px 0px white;
}

Answer 5

Answer №3

The problem is stemming from the use of border-collapse: collapse;
You will have better results by avoiding a table.
I've achieved the desired layout by utilizing div elements with display:inline-flex. Instead of specifying exact left values for each item, I wrapped the sticky elements in a single div.sticky.

.container {
  overflow: auto;
  width: 200px;
}

div.headers,
div.sticky {
  display: inline-flex;
}

div.headers>div,
div.sticky>div {
  background-color: red;
  border-right: 1px solid white;
  color: white;
  padding: 10px;
  z-index: 1;
}

div.headers>div.sticky {
  padding: 0;
  position: sticky;
  left: 0;
  border: none;
  z-index: 999;
}

div.sticky>div {
  background-color: blue;
}

<div class="container">
  <div class='headers'>
    <div class="sticky">
      <div>
        Test1
      </div>
      <div>
        Test2
      </div>
      <div>
        Test3
      </div>
    </div>
    <div>
      Test4
    </div>
    <div>
      Test5
    </div>
    <div>
      Test6
    </div>
  </div>
</div>

Answer 6

The problem is stemming from the use of border-collapse: collapse;
You will have better results by avoiding a table.
I've achieved the desired layout by utilizing div elements with display:inline-flex. Instead of specifying exact left values for each item, I wrapped the sticky elements in a single div.sticky.

.container {
  overflow: auto;
  width: 200px;
}

div.headers,
div.sticky {
  display: inline-flex;
}

div.headers>div,
div.sticky>div {
  background-color: red;
  border-right: 1px solid white;
  color: white;
  padding: 10px;
  z-index: 1;
}

div.headers>div.sticky {
  padding: 0;
  position: sticky;
  left: 0;
  border: none;
  z-index: 999;
}

div.sticky>div {
  background-color: blue;
}

<div class="container">
  <div class='headers'>
    <div class="sticky">
      <div>
        Test1
      </div>
      <div>
        Test2
      </div>
      <div>
        Test3
      </div>
    </div>
    <div>
      Test4
    </div>
    <div>
      Test5
    </div>
    <div>
      Test6
    </div>
  </div>
</div>

Answer 7

Answer №4

Make the sticky style more appealing with these changes:

  .sticky {
     background-color: navy;
     position: sticky;
     z-index: 2;
     border-spacing: 0 !important;
     outline: 1px dashed white;
     border: none;
  }

Answer 8

Make the sticky style more appealing with these changes:

  .sticky {
     background-color: navy;
     position: sticky;
     z-index: 2;
     border-spacing: 0 !important;
     outline: 1px dashed white;
     border: none;
  }

What can be done to stop a header from sticking to a table and displaying horizontally scrolling content along the border?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having Trouble with Form Submission Button Across Different Web Browsers

Are you looking for methods to alter the elements of a webpage prior to viewing it?

Tips for personalizing the Material-UI sticky header to work with horizontal scrolling

Is there a way to confine a jquery script within the dimensions of the container div?

Does the onChange event fire when the value is modified by the parent element?

Ways to eliminate the top space in the background image

Unable to add the div using a jQuery click event

Applying CSS dynamically to a mat-cell in Angular 6

When attempting to refresh, the global.Exp.Data.getLocalDataSet() function returns empty

What is the best way to transfer variables to a different page through a pop-up window?

Tips for animating the box-shadow effect using jQuery

Positioning the comments box on Facebook platform allows users to

Video background is malfunctioning on Firefox and Internet Explorer

Adding content to a text field and then moving to the next line

Error encountered during file upload - file field :input not found

What's the reason behind the absence of applied bootstrap style in jsFiddle?

JavaScript: The functionality of calling functions through buttons ceases to function once the page is updated without reloading

How to align Font Awesome icons inside `<span>` vertically with each other

What is the best way to locate and extract the content of an HTML element using XPath in Selenium with VBA?

Show the jQuery code block as HTML within a textarea