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

Answer 1

$('#table') means your finding element by id table.

$('.table') means your finding elements by class table.

These are the CSS selectors you used in css.

In your case, your table had id table so you can select that table using $('#table').

And you don't have any html elements using class table, so you'll get nothing when you select using $('.table').

Answer 2

The following style will create a stripped table with the first column fixed:

th:first-child, td:first-child{
    position: sticky;
    left: 0px;
    z-index: 1;
}
tr:nth-child(odd) > td{
    background-color: #ededed;
}
tr:nth-child(even) > td{
    background-color: #e2e2e2;
}
tr:nth-child(odd) > th{
    background-color: #d7d7d7;
}

Answer 3

Ok.. Remove all your js code and you can do this with some CSS tricks as below:

DEMO

CSS

.table > thead:first-child > tr:first-child > th:first-child {
    position: absolute;
    display: inline-block;
    background-color: red;
    height: 100%;
}

.table > tbody > tr > td:first-child {
    position: absolute;
    display: inline-block;
    background-color: red;
    height: 100%;
}

.table > thead:first-child > tr:first-child > th:nth-child(2) {
    padding-left: 40px;
}

.table > tbody > tr > td:nth-child(2) {
    padding-left: 50px !important;
}

Answer 4

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>