Fixed header with fixed column table is not responsive according to width

Question

I made a table with fixed header and column. But here there I had specify the width of the thead/tbody which I don't want. I put the whole table in a div wiht bootstrap class col-md-6 (50% width).But it doesn't work unless I hardcode style for thead and tbody. I want the thead and tbody take the width of the parent div . But somehow it is taking full width of the screen if not specified in pixel or percentage. Here is my code

  $(document).ready(function () { $('tbody').scroll(function (e) { $('tbody td:nth-child(1)').css("z-index", "1"); $('tbody td:nth-child(2)').css("z-index", "1"); $('thead').css("left", -$("tbody").scrollLeft()); $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); $('thead th:nth-child(2)').css("left", $("tbody").scrollLeft()); $('tbody td:nth-child(2)').css("left", $("tbody").scrollLeft()); }); }); 

  /*setting for fixed columns*/ table.trkFixTable tr td:nth-child(1), table.trkFixTable tr th:nth-child(1) { min-width: 150px; } table.trkFixTable tr td:nth-child(2), table.trkFixTable tr th:nth-child(2) { min-width: 150px; } table.trkFixTable thead th:nth-child(1), table.trkFixTable thead th:nth-child(2) { height: 80px; position: relative; z-index: 2; } table.trkFixTable tbody tr td:nth-child(1), table.trkFixTable tbody tr td:nth-child(2) { position: relative; height: 60px; } /*removing hover effect*/ table.trkFixTable td:hover::after, table.trkFixTable th:hover::after { all: unset; } /*common styles*/ table.trkFixTable { position: relative; overflow: hidden; /*width:100%;*/ border-collapse: collapse; } table.trkFixTable thead { position: relative; display: block; width: 500px; overflow: visible; } table.trkFixTable thead th { min-width: 80px; height: 32px; background-color: #6afce2; text-align: center; border:1px solid black; } table.trkFixTable tbody { position: relative; display: block; width: 500px; overflow: scroll; height: 200px; } table.trkFixTable tbody td { min-width: 80px; border: 1px solid #222; background-color: #c1fff4; text-align: center; } 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <div class="col-md-6"> <table class="trkFixTable"> <thead> <tr> <th>First</th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> <th>11</th> </tr> </thead> <tbody> <tr> <td>First</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> </tr> <tr> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> </tr> <tr> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> </tr> <tr> <td>First</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> </tr> <tr> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> </tr> <tr> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> </tr> <tr> <td>First</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> </tr> <tr> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> </tr> <tr> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> </tr> <tr> <td>First</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> </tr> <tr> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> </tr> <tr> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> <td>Robin</td> </tr> </tbody> </table> </div> 

All I want is to make the table responsive not like static 400px or 50% or something like that. Please help me some one

Answer 1

Got the problem. It was because I made the thead and tbody block. So they were separated from their parents. Now I fixed the problem removing the width property from tbody and thead styles and getting the width of parent then set the same width to thead and tbody using jQuery like this:

var parentWidth = $('.fixedParent').width();
        $('thead').width(parentWidth);
        $('tbody').width(parentWidth);