Horizontal And Vertical Scroll-able Table In Bootstrap

I am designing a table using bootstrap, responsive one. Till it has less no. of columns, it was good. With fixed header, it was working fine. JSFIDDLE VERTICAL SCROLLBAR Now, i req

Solution 1:

After a while, i got one solution for my query.. Solution to make table scroll-able vertically and horizontally and responsive

$('table').on('scroll', function() {
  $("#" + this.id + " > *").width($(this).width() + $(this).scrollLeft());
});

html {
  font-family: verdana;
  font-size: 10pt;
  line-height: 25px;
}

table {
  border-collapse: collapse;
  width: 300px;
  overflow-x: scroll;
  display: block;
}

thead {
  background-color: #EFEFEF;
}

thead,
tbody {
  display: block;
}

tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 140px;
}

td,
th {
  min-width: 100px;
  height: 25px;
  border: dashed 1px lightblue;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><divclass="container"><divclass="row"><divclass="col-sm-6 col-md-6"><divclass="table-responsive"><tableclass="table"id="table1"><thead><tr><th>sadasdasdfasdfasfasfasfa#</th><th>Firstname</th><th>Lastname</th><th>Age</th><th>City</th><th>Country</th><th>#</th><th>Firstname</th><th>Lastname</th><th>Age</th><th>City</th><th>Country</th></tr></thead><tbody><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr></tbody></table></div></div><divclass="col-sm-6 col-md-6"><divclass="table-responsive"><tableclass="table"id="table2"><thead><tr><th>sadasdasdfasdfasfasfasfa#</th><th>Firstname</th><th>Lastname</th><th>Age</th><th>City</th><th>Country</th><th>#</th><th>Firstname</th><th>Lastname</th><th>Age</th><th>City</th><th>Country</th></tr></thead><tbody><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr><tr><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td><td>1</td><td>Anna</td><td>Pitt</td><td>35</td><td>New York</td><td>USA</td></tr></tbody></table></div></div></div></div>

Note: Go to the jsFiddle to view it better.