Hello,
I have this fiddle exemplifying exactly how my table is:
What I'm trying to do is, besides keeping the first column fixed, as it is exemplified in the fiddle, where I followed an example here from the community, I would like to also set the header, because when the table is too large, it gets confused analyze the data, even more on the mobile. I tried to follow the same example but without success, some suggestion?
obs: I'm using bootstrap in constructing the table.
html
<script src="https://code.jquery.com/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><scriptsrc="https://code.jquery.com/jquery-2.1.4.js"></script><div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>ID</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>2</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>3</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr> <tr>
<td>4</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>2</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>3</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr> <tr>
<td>1</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>2</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>3</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr> <tr>
<td>1</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>2</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>3</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr> <tr>
<td>1</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>2</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>3</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr> <tr>
<td>1</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>2</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>3</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr> <tr>
<td>1</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>2</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>3</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr> <tr>
<td>1</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>2</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>3</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr> <tr>
<td>1</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>2</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>3</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr> <tr>
<td>1</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>2</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
<tr>
<td>3</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
<td>variable value $11</td>
</tr>
</tbody>
</table>
</div>
css
.table-responsive>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
}
.table > thead > tr > th {
background-color: darkblue;
color: #fff;
}
@media(min-width:768px) {
.table-responsive>.fixed-column {
display: none;
}
}
js
var $table = $('.table');
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
$fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
$fixedColumn.find('tr').each(function (i, elem) {
$(this).height($table.find('tr:eq(' + i + ')').height());
});
Follow fiddle for tbm manipulation!
VIEW THE FIDDLE here
Thank you!