CODEWITHSUNDEEP
csspositioncss-position
Noam
Noam

Reputation: 5266

position:sticky can't get both top and left to work

I'm trying to create a grid with both horizontal and vertical, and sticky header and first column.

I use this to get the header sticky

 .thead {
     position: sticky;
     top: 0px;
 }

I use this to get the first column to be sticky.

 div.tbody>div.tr>div:nth-child(1) {
    position: sticky;
    left: 0;
}
.thead>div>div:nth-child(1){
    left:0;
    top:0;
    position: sticky;
}

But I get a strange scroll behavior that the first column title is sticky to the left but not to the top. enter image description here

Here's the code I used. How can I get this to work so that the first column header will stick both to the left and to the top?

.fixed_header {
  width: 300px;
  height: 300px;
  overflow: scroll;
}

.td,
.th {
  background-color: antiquewhite;
  width: 100px;
  float: left;
}

.thead {
  position: sticky;
  top: 0px;
}

.th {
  font-weight: bold;
}

.tr {
  display: block;
  clear: both;
  width: 500px;
}

.thead>div>div:nth-child(1) {
  left: 0;
  top: 0;
  position: sticky;
}

div.tbody>div.tr>div:nth-child(1) {
  position: sticky;
  left: 0;
}
<div class="fixed_header">
  <div class="thead">
    <div class="tr">
      <div class="th">Col 1</div>
      <div class="th">Col 2</div>
      <div class="th">Col 3</div>
      <div class="th">Col 4</div>
      <div class="th">Col 5</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
  </div>
</div>

Upvotes: 3

Views: 4425

Answers (3)

Noam
Noam

Reputation: 5266

Eventually I was able to solve it by giving the thead z-index of 1 - that solved the problem without any javascript

.fixed_header {
  width: 300px;
  height: 300px;
  overflow: scroll;
}

.td,
.th {
  background-color: antiquewhite;
  width: 100px;
  float: left;
}

.thead {
  position: sticky;
  top: 0px;
  z-index:1;
}

.th {
  font-weight: bold;
}

.tr {
  display: block;
  clear: both;
  width: 500px;
}

.thead>div>div:nth-child(1) {
  left: 0;
  top: 0;
  position: sticky;
  
}

div.tbody>div.tr>div:nth-child(1) {
  position: sticky;
  left: 0;
  
}
<div class="fixed_header">
  <div class="thead">
    <div class="tr">
      <div class="th">Col 1</div>
      <div class="th">Col 2</div>
      <div class="th">Col 3</div>
      <div class="th">Col 4</div>
      <div class="th">Col 5</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
  </div>
</div>

Upvotes: 6

Itay Gal
Itay Gal

Reputation: 10834

Maybe use a different structure and scroll only the inner rows/columns. Added JQuery script to make it work.

$( ".fixed_header" ).scroll(function() {
    var fixedHeader = $( ".fixed_header" );
    $( ".aaa" ).scrollTop(fixedHeader.scrollTop());
});
.fixed_header {
  width: 300px;
  height: 300px;
  overflow: scroll;
  display: flex;
  flex-direction: column;
}

.td,
.th {
  background-color: antiquewhite;
  width: 100px;
  float: left;
}

.thead {
  position: sticky;
  top: 0px;
}

.th {
  font-weight: bold;
}

.tr {
  display: block;
  clear: both;
  width: 500px;
}

.thead>div>div:nth-child(1) {
  left: 0;
  top: 0;

}

.content{
   position: relative;
   
}
.sticky-column{
    width: 100px;
    height: 280px;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
}

.data{
  margin-left: 100px;
}

.aaa{
  overflow: hidden;
  height: 2800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
      <div class="sticky-column">
        <div>
          <div class="th">Col 1</div>
        </div>
        <div class="aaa">
          <div class="td">row 1-0</div>
          <div class="td">row 2-0</div>
          <div class="td">row 3-0</div>
          <div class="td">row 4-0</div>
          <div class="td">row 5-0</div>
          <div class="td">row 6-0</div>
          <div class="td">row 7-0</div>
          <div class="td">row 1-0</div>
          <div class="td">row 2-0</div>
          <div class="td">row 3-0</div>
          <div class="td">row 4-0</div>
          <div class="td">row 5-0</div>
          <div class="td">row 6-0</div>
          <div class="td">row 7-0</div>
          <div class="td">row 1-0</div>
          <div class="td">row 2-0</div>
          <div class="td">row 3-0</div>
          <div class="td">row 4-0</div>
          <div class="td">row 5-0</div>
          <div class="td">row 6-0</div>
          <div class="td">row 7-0</div>
        </div>
      </div>
       <div class="data">
     

<div class="fixed_header">
  <div class="thead">
    <div class="tr">

      <div class="th">Col 2</div>
      <div class="th">Col 3</div>
      <div class="th">Col 4</div>
      <div class="th">Col 5</div>
    </div>
  </div>
  <div class="tbody">
    
        <div class="tr">
          
          <div class="td">row 1-1</div>
          <div class="td">row 1-2</div>
          <div class="td">row 1-3</div>
          <div class="td">row 1-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 2-1</div>
          <div class="td">row 2-2</div>
          <div class="td">row 2-3</div>
          <div class="td">row 2-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 3-1</div>
          <div class="td">row 3-2</div>
          <div class="td">row 3-3</div>
          <div class="td">row 3-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 4-1</div>
          <div class="td">row 4-2</div>
          <div class="td">row 4-3</div>
          <div class="td">row 4-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 5-1</div>
          <div class="td">row 5-2</div>
          <div class="td">row 5-3</div>
          <div class="td">row 5-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 6-1</div>
          <div class="td">row 6-2</div>
          <div class="td">row 6-3</div>
          <div class="td">row 6-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 7-1</div>
          <div class="td">row 7-2</div>
          <div class="td">row 7-3</div>
          <div class="td">row 7-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 1-1</div>
          <div class="td">row 1-2</div>
          <div class="td">row 1-3</div>
          <div class="td">row 1-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 2-1</div>
          <div class="td">row 2-2</div>
          <div class="td">row 2-3</div>
          <div class="td">row 2-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 3-1</div>
          <div class="td">row 3-2</div>
          <div class="td">row 3-3</div>
          <div class="td">row 3-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 4-1</div>
          <div class="td">row 4-2</div>
          <div class="td">row 4-3</div>
          <div class="td">row 4-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 5-1</div>
          <div class="td">row 5-2</div>
          <div class="td">row 5-3</div>
          <div class="td">row 5-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 6-1</div>
          <div class="td">row 6-2</div>
          <div class="td">row 6-3</div>
          <div class="td">row 6-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 7-1</div>
          <div class="td">row 7-2</div>
          <div class="td">row 7-3</div>
          <div class="td">row 7-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 1-1</div>
          <div class="td">row 1-2</div>
          <div class="td">row 1-3</div>
          <div class="td">row 1-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 2-1</div>
          <div class="td">row 2-2</div>
          <div class="td">row 2-3</div>
          <div class="td">row 2-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 3-1</div>
          <div class="td">row 3-2</div>
          <div class="td">row 3-3</div>
          <div class="td">row 3-4</div>
        </div>
        <div class="tr">
         
          <div class="td">row 4-1</div>
          <div class="td">row 4-2</div>
          <div class="td">row 4-3</div>
          <div class="td">row 4-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 5-1</div>
          <div class="td">row 5-2</div>
          <div class="td">row 5-3</div>
          <div class="td">row 5-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 6-1</div>
          <div class="td">row 6-2</div>
          <div class="td">row 6-3</div>
          <div class="td">row 6-4</div>
        </div>
        <div class="tr">
          
          <div class="td">row 7-1</div>
          <div class="td">row 7-2</div>
          <div class="td">row 7-3</div>
          <div class="td">row 7-4</div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

A. K. Singh
A. K. Singh

Reputation: 1

remove "position: sticky;" in these 2 places and it works fine now. 

.thead>div>div:nth-child(1) {
left: 0;
top: 0;
}

div.tbody>div.tr>div:nth-child(1) {
left: 0;

modified code here - 

.fixed_header {
  width: 300px;
  height: 300px;
  overflow: scroll;
}

.td,
.th {
  background-color: antiquewhite;
  width: 100px;
  float: left;
}

.thead {
  position: sticky;
  top: 0px;
}

.th {
  font-weight: bold;
}

.tr {
  display: block;
  clear: both;
  width: 500px;
}

.thead>div>div:nth-child(1) {
  left: 0;
  top: 0;
}

div.tbody>div.tr>div:nth-child(1) {
  left: 0;
<div class="fixed_header">
  <div class="thead">
    <div class="tr">
      <div class="th">Col 1</div>
      <div class="th">Col 2</div>
      <div class="th">Col 3</div>
      <div class="th">Col 4</div>
      <div class="th">Col 5</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
    <div class="tr">
      <div class="td">row 1-0</div>
      <div class="td">row 1-1</div>
      <div class="td">row 1-2</div>
      <div class="td">row 1-3</div>
      <div class="td">row 1-4</div>
    </div>
    <div class="tr">
      <div class="td">row 2-0</div>
      <div class="td">row 2-1</div>
      <div class="td">row 2-2</div>
      <div class="td">row 2-3</div>
      <div class="td">row 2-4</div>
    </div>
    <div class="tr">
      <div class="td">row 3-0</div>
      <div class="td">row 3-1</div>
      <div class="td">row 3-2</div>
      <div class="td">row 3-3</div>
      <div class="td">row 3-4</div>
    </div>
    <div class="tr">
      <div class="td">row 4-0</div>
      <div class="td">row 4-1</div>
      <div class="td">row 4-2</div>
      <div class="td">row 4-3</div>
      <div class="td">row 4-4</div>
    </div>
    <div class="tr">
      <div class="td">row 5-0</div>
      <div class="td">row 5-1</div>
      <div class="td">row 5-2</div>
      <div class="td">row 5-3</div>
      <div class="td">row 5-4</div>
    </div>
    <div class="tr">
      <div class="td">row 6-0</div>
      <div class="td">row 6-1</div>
      <div class="td">row 6-2</div>
      <div class="td">row 6-3</div>
      <div class="td">row 6-4</div>
    </div>
    <div class="tr">
      <div class="td">row 7-0</div>
      <div class="td">row 7-1</div>
      <div class="td">row 7-2</div>
      <div class="td">row 7-3</div>
      <div class="td">row 7-4</div>
    </div>
  </div>
</div>

Upvotes: -1

Related Questions