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.

htmlcss

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

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

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

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 №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;
  }

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

Developing an identical design and layout but utilizing a distinct domain name for the company

After being given the task of creating a website identical to an existing one with a different domain name on WordPress, I proposed using the parent HTML source code or cloning it to speed up the project. The client agreed, explaining that starting from sc ...

javascripthtmlwordpressalter

Guide on how to display matching options in an input box using HTML datalist based on user input at the beginning

I am a beginner in React and I am looking to create an autocomplete suggestion box for a text input field. I want the suggestions to only match the first letters of the available options, unlike the current behavior of HTML's <datalist>. Althou ...

htmlreactjstypescriptinputhtml-datalist

A guide on showcasing the compilation results of PHP code directly on the web browser

How can I compile PHP code on an HTML Button click and display the compilation output in a browser? The code snippet below works well in the terminal but doesn't show anything in the browser. I am currently using XAMPP server on a Windows machine. &l ...

phphtmlxampp

What steps do I take to eliminate this additional content?

Currently working on a web messenger project and facing an issue with a specific bar that I want to remove from my interface: Within the Home.blade.php file, the code snippet looks like this: @extends('layouts.texter') @section('content&ap ...

htmlcsslaravelvue.js

Challenge with modifying CSS variable names in Angular SSR

Recently, I noticed that some of my CSS variable names are being changed to something else on the server-side rendering build, causing them not to work as expected. An example of this is: .color-black-75 { color: var(--black-75-color); } In my styles. ...

cssangular

The browser does not support the display of Spanish special characters

I am working on a website and need to incorporate support for the Spanish language. I have prepared an XML file with both English and Spanish text. The XML file is being read based on the user's selection of language from a dropdown menu. Everything s ...

htmlxmlutf-8metaiso-8859-1

The behavior of Elementor lightbox buttons upon being clicked

When using Android, I've noticed that the lightbox briefly displays a semitransparent cyan bar on the left and right buttons when they are pressed. Is there a way to control or prevent this behavior? Any suggestions would be appreciated! Thanks in adv ...

javascriptcsswordpresslightboxelementor

The CSS Scroll-Snapping feature seems to be overlooking one specific element that it should be snapping to

Currently, this website is designed to work exclusively for mobile devices. When viewed in Chrome's mobile view using the inspector, everything appears to be functioning correctly. However, when accessed through Safari or on an actual mobile phone, th ...

ioscssmobilesafarivertical-scrolling

Tips for adding text dynamically to images on a carousel

The carousel I am using is Elastislide which can be found at http://tympanus.net/Development/Elastislide/index.html. Currently, it displays results inside the carousel after a search, but I am struggling to dynamically add text in order to clarify to use ...

javascriptjqueryhtml

Enhance webpage speed by enabling browser caching for embedded iframe CSS and Javascript files

Imagine having a file named main.html. Inside this file, there's an iframe that points to another file called sub.html. Additionally, there's a button on main.html that, when clicked, refreshes the content of sub.html. This sub.html file relies o ...

jqueryhtmlcachingiframe

What is the best way to align the middle element of a flex row in the center?

Desired Outcome: I have three elements within a container styled with display: flex. My goal is to align the left item to the left, the right item to the right, and have the middle item centered. space-between does not achieve this look due to the varyin ...

htmlcssflexbox

I am having trouble getting my console.log function to work properly on my HTML page

As a beginner in JavaScript, I am facing an issue with my console.log not working at all. When I type a console.log message, nothing shows up on my HTML page. I have tried to debug it, but being a newbie, I lack the necessary knowledge. All I can do is see ...

javascripthtml

Experience the sleek and intuitive Material Design Lite navigation drawer, inspired by the likes of Google Android

Currently, I am incorporating Material design lite into my website and have found many templates that work well. However, I am looking to make a slight design modification to the navigation drawer. Here is the dashboard template I am currently utilizing: ...

csshtmlmaterial-designangular2-mdl

Stop iframes on iOS from automatically adjusting their height based on the content within them

Update: I recently discovered that Apple quietly prohibits fixed-size iframes in iOS. How frustrating! What can be done to make an IFrame responsive in iOS Safari? I am facing a seemingly straightforward task: embedding a fixed-size <iframe> within ...

cssiframewkwebview

validation of dialog forms

Is there a way to trigger the $("#form").validated() function from the ok button in a jquery-ui-dialog? Please note that I would prefer not to use a submit button within the form. ...

javascripthtmlajaxjquery-ui-dialog

Mapping the Way: Innovative Controls for Navigation

Currently, I am utilizing the HERE maps API for JavaScript. However, I would like to customize the design of the map controls similar to this: Below is an example for reference: HERE EXAMPLE Is it feasible to achieve this customization? ...

javascriptcssmapshere-api

What could be causing my images to appear incomplete when using a background image with the style property?

Why are the images not appearing in full when I use the background-image URL style property? What is displayed on the page: https://i.sstatic.net/SwOGq.jpg body { background-image: url("../Bilder/ikkephotoshopped.jpg"), url(". ...

htmlcss

Transitioning to the Full Website with PHP Sessions - Discrepancies in Styling

I've encountered an issue when trying to switch from a mobile site to a full site using sessions. The styles on the full site do not load unless I refresh the page, at which point they finally appear. On my mobile page, there's a link that direct ...

phphtml

What is the best way to make a JavaFX WebView the same size as the entire scene?

My goal is to have a JavaFX WebView that automatically resizes to fit the scene upon startup. Currently, I am focused on setting the initial size properly. @Override public void start(Stage stage) { try { Scene scene = new Scene(createWebViewP ...

javacsswebviewjavafxjavafx-webengine

Aligning items in the header bar with floating <li> elements

I'm struggling with centering an element in the header bar of my website. I currently have a single header bar at the top, and inside the <header> tag, there's an unordered list with some items floating left and one floating right. Now, I w ...

htmlcsshtml-lists