One column that sticks and two rows that adhere

My three-line hat is giving me trouble with merged cells. I've tried various solutions, but there's always a shift in the cells.

https://i.sstatic.net/ZAj5y.jpg

I've attempted different approaches to fixing this header issue, here's an example of what I've tried:

.table-scrolGridTerminal tr:nth-child(1) {
        position: sticky;
        top: 0;
    }
.table-scrolGridTerminal tr:nth-child(2) {
    position: sticky;
    top: 25px;
}
.table-scrolGridTerminal tr:nth-child(3) {
    position: sticky;
    top: 50px;
}
<table class="table-scrolGridTerminal" cellspacing="0" rules="all" name="GridView3" border="1" id="MainContent_GridView3" style="width:100%;border-collapse:collapse;">
    <tbody>
      <tr>
        <th colspan="9">header</th>
      </tr>
    <tr style="background-color:Gray;font-weight:bold;">
      <th class="centre_align" rowspan="2">№ ktk</th>
      <th class="centre_align" colspan="2">arrival</th>
      <th class="centre_align" rowspan="2">№ auto</th>
    </tr>
    <tr style="background-color:Gray;font-weight:bold;">
      <th scope="col">date</th>
      <th scope="col">time</th>
    </tr>
    <tr style="color:#333333;background-color:#F7F6F3;">
      <td>5122073</td>
      <td>
          <span id="MainContent_GridView3_Label2_0">15.10.2019</span>
      </td>
      <td>
          <span id="MainContent_GridView3_Label3_0">08:27:06  </span>
      </td>
      <td>
        12548
      </td>
    </tr>
  </tbody>
</table>
htmlcss

Answer №1

It seems like a part of your theader is located within the tbody section. To resolve this, consider utilizing nested tables.

.stickyHeader{
    position:sticky;
    top:0px;
    background-color:gray;
    height:20px;
}

.stickySecondRowHeader{
    position:sticky;
    top:20px;
    background-color:gray;
    height:20px;
}

table{
  width:100%;
  border-collapse:collapse;
}

#ktkHeader{
  height:40px;
}

#childTableContainer{
  overflow-y:auto;
  max-height:150px;
  padding:0px;
  border: 1px solid black;
}

thead{
  background-color:gray;
}

th{
  outline: 1px solid gray;  
}

thead, td{
  height:20px;
}
<table cellspacing="0" rules="all" style="border:1px solid black;">
  <thead>
    <tr>
      <th colspan="4">header</th>
    </tr>           
  </thead>
  <tbody>
    <tr>
      <th rowspan="1" id="ktkHeader" class="stickyHeader">№ ktk</th>
      <th rowspan="2">
        <div id="childTableContainer">
          <table rules="all" border="0" cellspacing="0" cellpadding="0">
            <thead>
              <tr>
                <th colspan="2" class="stickyHeader">arrival</th>
                <th rowspan="2" class="stickyHeader">auto</th>
              </tr>
              <tr>
                <th class="stickySecondRowHeader">date</th>
                <th class="stickySecondRowHeader">time</th>
              </tr>
            </thead>
            <tbody>         
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>     
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>  
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>  
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>  
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>  
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>  
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>  
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>  
              <tr>
                <td scope="col">15.10.2019</td>
                <td scope="col">08:27:06</td>
                <td scope="col">12548</td>
              </tr>              
            </tbody>
          </table>
        </div>
      </th>       
    </tr>
    <tr>
      <th>5122073</th>
    </tr>
  </tbody>
</table>

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

Ways to retrieve nested #document within html?

Hey there! I'm trying to figure out how to use document.querySelector() to locate span id='t1', but I'm unsure of how to access the #document element and its contents. Is it possible to select elements within #document? Currently, I ha ...

htmldocumentqueryselector

Copying an HTML <div> and inserting it into a database involves capturing the input text value as part of the process

How can I duplicate a content div in jQuery using the clone() method, while also incorporating the value of an input text? Is this the correct approach, or is there a better alternative? ...

phpjqueryhtmlmysql

Displayed outside the div element, the Bootstrap popover is extending beyond its

When using bootstrap popover, everything works fine except for the fact that when hovering outside the div area, the popup still appears. Changing the div to a button resolves this issue. Any suggestions? If you want to see a Demo, hover outside the red d ...

jquerycsstwitter-bootstrap

Transitioning one element's opacity to zero while concurrently increasing another element's opacity to replace it

There are a total of 3 div elements and 3 links included in this setup. The goal is to only display one div at any given time. Upon clicking on a link corresponding to a different div, the current one should fade out while the selected one fades in seamle ...

javascriptjquerycss

The grid columns are not utilizing the entire space of the rows and are extending beyond to the next line

I'm currently designing a card layout with images and aiming for uniformity in size. The plan is to have 4 columns in each row, with one card per column. Each subsequent row will also contain 4 cards. However, there seems to be an issue where the ca ...

htmlcsstwitter-bootstrapbootstrap-5card

Exploring the Beauty of Trees through Twitter Bootstrap

I've been exploring the creation of a tree structure (similar to a directory tree) using mainly CSS and minimal JS for things like states. I'm wondering if there are any reliable tree plugins available that work well with bootstrap or jquery-ui b ...

javascriptjquerytwitter-bootstrapcssjquery-ui

Checkbox input with alphabetical ordering

I am currently facing an issue with a form that has checkboxes, but the text is not in alphabetical order. While there are plenty of examples for lists, finding examples for checkboxes has been challenging. http://jsfiddle.net/fG9qm/ <form> < ...

javascriptjqueryhtml

Prime NG: Filtering options using label in dropdown menu

I'm facing an issue with my angular project that utilizes prime ng. The problem arises when attempting to perform a column search on rows of dropdown values. When searching for 'Jan', the system fails to retrieve any data, but interestingly ...

htmlangulartypescriptprimengprimeng-dropdowns

Retrieve PHP variable from a PHP CSS file

I'm facing an issue where I am unable to retrieve a PHP variable from a CSS file that is loaded in this manner from my index.php: <link href="css/style.php" rel="stylesheet"> Within the style.php file, the code looks like this: <?php heade ...

phpcssvariables

Partially loading CSS stylesheet

My directory structure looks like this.... iamdan > css > style.css The php file, named head.php, is located in a folder called includes within: iamdan > includes > head.php This file contains the following code: <head> <title ...

phpcssload

I'm noticing my table collapsing as I move around the div elements - any idea why this is happening

A challenge I am facing is creating a dynamic table where users can drag and drop colored boxes with animated transitions. While it mostly works well, sometimes the table collapses inexplicably. Here are steps to reproduce the issue: Move 100 - 400 Move 1 ...

javascripthtmljquerycss

The request body is unable to interpret inputs coming from an array of name attributes

I am encountering issues with a form that contains arrays in the name attribute. Currently, there are two specific problems I am facing. (1) After submitting the form, I am unable to extract and process the values stored within itemName[], itemValue[], an ...

javascripthtmlnode.jsexpresshandlebars.js

disabling text alignment as justified for specific sections of text

To avoid wrapping a specific part of text, you can use <span style="white-space: nowrap;">. If you have justified text (text-align: justify), and want to prevent justification for certain words without affecting the rest, is there a way to do it? F ...

cssmobile-safari

Remove any unnecessary white space and new lines from the HTML code

Is there a way to remove double whitespaces and new lines from my HTML output without altering the ones within textarea and pre tags using PHP? ...

phphtml

Having trouble retrieving the selected value from a dropdown list with Jquery

In my current setup, I have a drop-down list situated within a pop-up modal. The dropdown menu is structured like this: <select name="EventTypeId" class="form-control formTextBox" id="ddlEventType"> <option value="">Please Select</optio ...

javascriptjqueryhtml

The div's width shifts upon reaching the top of the page

Creating a blog site example and trying to lock the position of a div once it reaches the top of the page. Utilizing materialize.css for this task. <div class="row"> <div class="col m8 s12"> <!-- content goes here --> < ...

javascripthtmlcss

Internet Explorer is having issues displaying CSS text accurately, particularly in relation to the background-

Having an issue with Internet Explorer not displaying my background clipped text correctly. In other browsers like Chrome and Firefox, the code renders fine: https://i.stack.imgur.com/x9lio.png However, in IE it appears differently: Your code: HTML: & ...

htmlcssinternet-explorertext

Am I utilizing the htmlspecialchars function properly?

My main objective is to protect the user from malicious code and prevent XSS attacks. I have implemented a series of checks to filter the user's input before storing it in the database. The user input is stored in the $post variable. $post = htmlspec ...

javascriptphphtml

The issue arises when radio buttons allow for multiple selections and labels cannot be displayed in a single row

I am facing an issue with the radio buttons displayed in the Bootstrap format. The labels for the radio buttons are not aligning on the same line as the buttons. Below is the code I am using: <div class="row"> <div class="col-lg-4&q ...

htmlbootstrap-4radio-button

Having trouble with spawning child processes asynchronously in JavaScript

I'm trying to figure out how to format this code so that when a user clicks a button, new input fields and redirect buttons are asynchronously inserted into the unordered list. Everything was working fine until I added the redirect button insertion fu ...

javascripthtml