Fix First Column of a Bootstrap Table

Question

I followed @koala_dev's code in this post to try to lock the first column s my table scrolls horizontally. The code unfortunately has no effect on my table. I was wondering if anyone could give me some pointers on what I have done wrong as I am new to programming.

This is my table: http://jsfiddle.net/mademoiselletse/bypbqboe/59/

This is the code I inserted in JS (line 121-133):

$(function() {     var $tableClass = $('.table');     // Make a clone of our table     var $fixedColumn = $tableClass.clone().insertBefore($tableClass).addClass('fixed-column');      // Remove everything except for first column     $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();      // Match the height of the rows to that of the original table's     $fixedColumn.find('tr').each(function(i, elem) {       $(this).height($tableClass.find('tr:eq(' + i + ')').height());     }); }); 

This is the CSS properties (line 36-47) I have inserted:

.table-responsive > .fixed-column {    position: absolute;    display: inline-block;    width: auto;    border-right: 1px solid #ddd; }  @media(min-width:768px) {     .table-responsive>.fixed-column {         display: none;     } } 

The only thing I deviated from the demo code was that I defined $('.table') as $tableClass instead of $table since I have previously defined var $table as $('#table') . Your help will be much appreciated!

Answer 1

Just add position:sticky to th & td first-child.

th:first-child, td:first-child  {    position:sticky;    left:0px;    background-color:grey;  }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>  <table class="table">    <tr>      <th>TIME</th>      <th>Company</th>      <th>Company</th>      <th>Company</th>      <th>Company</th>      <th>Company</th>      <th>Company</th>      <th>Contact</th>      <th>Country</th>    </tr>    <tr>      <td>11:40   </td>      <td>Maria Anders</td>      <td>Alfreds Futterkiste</td>       <td>Maria Anders</td>      <td>Alfreds Futterkiste</td>      <td>Maria Anders</td>      <td>Alfreds Futterkiste</td>      <td>Maria Anders</td>      <td>Germany</td>    </tr>    <tr>      <td>11:40   </td>      <td>Maria Anders</td>      <td>Alfreds Futterkiste</td>      <td>Maria Anders</td>      <td>Alfreds Futterkiste</td>      <td>Maria Anders</td>      <td>Centro comercial Moctezuma</td>      <td>Francisco Chang</td>      <td>Mexico</td>    </tr>    <tr>      <td>11:40   </td>      <td>Maria Anders</td>      <td>Alfreds Futterkiste</td>      <td>Maria Anders</td>      <td>Alfreds Futterkiste</td>      <td>Maria Anders</td>      <td>Ernst Handel</td>      <td>Roland Mendel</td>      <td>Austria</td>    </tr>    <tr>     <td>11:40   </td>      <td>Maria Anders</td>      <td>Alfreds Futterkiste</td>      <td>Maria Anders</td>      <td>Alfreds Futterkiste</td>      <td>Maria Anders</td>      <td>Island Trading</td>      <td>Helen Bennett</td>      <td>UK</td>    </tr>    <tr>      <td>11:40   </td>      <td>Maria Anders</td>      <td>Alfreds Futterkiste</td>      <td>Maria Anders</td>      <td>Alfreds Futterkiste</td>      <td>Maria Anders</td>      <td>Laughing Bacchus Winecellars</td>      <td>Yoshi Tannamuri</td>      <td>Canada</td>    </tr>    <tr>      <td>11:40   </td>      <td>Maria Anders</td>      <td>Alfreds Futterkiste</td>      <td>Maria Anders</td>      <td>Alfreds Futterkiste</td>      <td>Maria Anders</td>      <td>Magazzini Alimentari Riuniti</td>      <td>Giovanni Rovelli</td>      <td>Italy</td>    </tr>  </table>