0
Hello,
I have this fiddle exemplifying exactly how my table is:
What I’m trying to do is, in addition to keeping the first column fixed, as it is exemplified in fiddle, where I followed an example from here in the community, I would also like to fix the header, because when the table is too big, it is confusing to analyze the data, even more in mobile. I tried to follow the same example but without success, some suggestion?
Obs: I’m using bootstrap in table construction.
html
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="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><script src="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 handling tbm!
WATCH THE FIDDLE here
Grateful!
I think the best way is to put
display: blockin thetbodyand then manually adjusting thewidthoftds.– Leon Freire
I did something that worked, but it’s strange to good code. Look at this http://kithomepage.com/sos/Fixar-primeira-coluna.htm
– user60252
From what I understand you want to fix the first line where the table header is, and it would be more interesting the code here in the question
– Lennon S. Bueno
@Leocaracciolo really yours worked, but the first column is no longer fixed, I need both ;/
– João Vitor
the code is in the question @Leonfreire, click on the fiddle
– João Vitor
@jvbarsou Yes, I know. And I made my suggestion.
– Leon Freire
@jvbarsou a good practice and recommended by the community is to put the code in the question, help us and help you :)
– Lennon S. Bueno
@Lennons.Bueno Thanks for the tip Lennon! I took the habit of putting code in fiddle because whenever I asked the question, they asked to make the fiddle available because it is easier to manipulate! I just tidied up!
– João Vitor
Stack Overflow is not a forum.
– Oralista de Sistemas