Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<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>
 
.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;
    }
}
 
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());
});
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers