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
