Fix Bootstrap tbody scroll with parent

Question

I've created a codepen with fixed table header but there is an issue. When table columns are increased the it shows vertical scroll after scrolling to right side.

How it tbody vertical scroll can be fixed to the parent so it is always visible.

https://codepen.io/cybentizen/pen/eXBaor

@media (max-width:991px) {
  table.table-sticky tbody {
    overflow-x: hidden;
  }

  table.table-sticky th,
  table.table-sticky td {
    min-width: 100px !important;
    width: 100px;
  }
}

@media (min-width:768px) {
table.table-sticky tr {
    table-layout: fixed;
}
}

@media (max-width:767px) {
table.table-sticky th,
table.table-sticky td {
    min-width: 150px !important;
}

table.table-sticky tbody {
    overflow-x: hidden;
}
}
table.table-sticky tr {
  width: 100%;
  display: inline-table;
  float: left;}
  table.table-sticky th {
  padding-left: 0;
}

table.table-sticky {
height: 190px;
position: relative;
margin-bottom: 0;
}

table.table-sticky thead {
position: sticky;
width: calc(100% - 17px) !important;
}

table.table-sticky thead th:last-of-type {
border-right: 0;
}

table.table-sticky tbody {
overflow-y: scroll;
overflow-x: hidden;
display: inline-block;
height: 150px;
width: 100%;
/* position: absolute; */
}

table.table-sticky-double tbody {
height: 142px;
}

table.table-sticky tr.collapse {
background-color: #eee;
display:none;
}

table.table-sticky tr.collapse.in {
background-color: #eee;
display: table;
}

table.table-sticky tr.collapse.in td {
border:0;
color: #666;
font-size: 11px;
padding: 0px;
}

table.table-sticky tr.collapse.in td input {
border: 0;
background: transparent;
box-shadow: none;
color: #666;
font-size: 11px;
}

table.table-sticky tr.collapsing {
-webkit-transition: none;
transition: none;
display: none;
}

I've also added responsive queries in it and styling for TD and TR.

Udara Kasun · Accepted Answer

I used simple trick for your problem. check and try this

function myf(){     
   var el = document.getElementById('mybody');
   document.getElementById('myhead').scrollLeft=el.scrollLeft;
}

th, td{
   width:80px;
   text-align:left;
}

@media (max-width:991px) {
    table.table-sticky tbody {
        overflow-x: hidden;
    }

    table.table-sticky th,
    table.table-sticky td {
        min-width: 100px !important;
        width: 100px;
    }
}

@media (min-width:768px) {
    table.table-sticky tr {
        table-layout: fixed;
    }
}

@media (max-width:767px) {
    table.table-sticky th,
    table.table-sticky td {
        min-width: 150px !important;
    }

    table.table-sticky tbody {
        overflow-x: hidden;
    }
}

table.table-sticky tr {
    width: 100%;
    display: inline-table;
    float: left;
}

table.table-sticky th {
    padding-left: 0;
}

table.table-sticky {
    height: 190px;
    position: relative;
  margin-bottom: 0;
}

table.table-sticky thead {
    
}

table.table-sticky thead th:last-of-type {
    border-right: 0;
}

table.table-sticky tbody {
    overflow-y: scroll;
    overflow-x: scroll;
    display: inline-block;
    height: 150px;
    width: 400px;
    /* position: absolute; */
}

/*.table-responsive {
    overflow-x: inherit;
}*/

table.table-sticky-double tbody {
    height: 142px;
}

table.table-sticky tr.collapse {
    background-color: #eee;
    display:none;
}

table.table-sticky tr.collapse.in {
    background-color: #eee;
    display: table;
}

table.table-sticky tr.collapse.in td {
    border:0;
    color: #666;
    font-size: 11px;
    padding: 0px;
}

table.table-sticky tr.collapse.in td input {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #666;
    font-size: 11px;
}

table.table-sticky tr.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

thead{   
    width: 400px;
    display: inline-block;
    overflow: hidden;
}


  
    
      
        
          Serial
          Item code
          Item name
          Mfg. Date
          Expiry Date
          Length
          Width
          Height
          Action
        
      
      
        
          0001
          00010001
          Item 1
          01/01/2019
          01/01/2020
          5.0
          3.0
          0.0
          x
        
        
          0001
          00010001
          Item 1
          01/01/2019
          01/01/2020
          5.0
          3.0
          0.0
          x
        
        
          0001
          00010001
          Item 1
          01/01/2019
          01/01/2020
          5.0
          3.0
          0.0
          x
        
        
          0001
          00010001
          Item 1
          01/01/2019
          01/01/2020
          5.0
          3.0
          0.0
          x
        
        
          0001
          00010001
          Item 1
          01/01/2019
          01/01/2020
          5.0
          3.0
          0.0
          x
        
        
          0001
          00010001
          Item 1
          01/01/2019
          01/01/2020
          5.0
          3.0
          0.0
          x
        
        
          0001
          00010001
          Item 1
          01/01/2019
          01/01/2020
          5.0
          3.0
          0.0
          x

Code Pen Example 1

Code Pen Example 2

Fix Bootstrap tbody scroll with parent

Answers (1)

Related Questions