Set the first column and header of an HTML table

0

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!

    
asked by anonymous 12.05.2017 / 16:24

0 answers