Bootstrap 3 Responsive Table with Fixed First Column

Fix First Column of a Bootstrap Table

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;
}

Bootstrap 3 responsive table with first fixed column

I have edited your fiddle and did some changes like i removed display:inline-block and position and added fix width for that column so it will stay there.

.table>thead:first-child>tr:first-child>th:first-child
{
    height:auto;
    width:100px; /*change according to your need*/
}

For more details please check this link .

bootstrap 3 responsive table with fixed first column

If you're only targeting mobile devices then this may work for you: you can clone the first column in your table and apply position:absolute so it appears "in front" when you scroll the rest of the table.

For this you'd need some basic jquery code and a custom CSS class:

jQuery

$(function(){
    var $table = $('.table');
    //Make a clone of our table
    var $fixedColumn = $table.clone().insertBefore($table).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($table.find('tr:eq(' + i + ')').height());
    });
});

CSS

.table-responsive>.fixed-column {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
    background-color: #fff; /* bootstrap v3 fix for fixed column background color*/
}
@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

Here's a working demo for this approach

Bootstrap4 Responsive Table - Fixed first column

table {    font-family: arial, sans-serif;    border-collapse: collapse;    width: 100%;}
td, th {    border: 1px solid #dddddd;    text-align: left;    padding: 8px;}th{background-color:black;color:white;}th:first-child, td:first-child{  position:sticky;  left:0px; } td:first-child {  background-color:grey; }

<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>

Bootstrap Table with Fixed Column on top when scrolling down

You can just add a position: sticky; on the table's thead and it will stick to the top with top: 0;. More on position property here.

thead {
  position: sticky;
  top: 0;
  background-color: #fff !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="card-body" style="height:400px; width:99%; overflow:scroll;">
  <!--TABLE-->
  <h5>ED Visits Suspected Drug Overdose Data</h5>
  <div class="table">
    <table class="table mb-0">
      <thead>
        <tr style="vertical-align:center;">
          <th scope="col">Ohio County</th>
          <th scope="col">2016 Q3 </th>
          <th scope="col">2016 Q4 </th>
          <th scope="col">2017 Q1 </th>
          <th scope="col">2017 Q2 </th>
          <th scope="col">2017 Q3 </th>
          <th scope="col">2017 Q4 </th>
          <th scope="col">2018 Q1 </th>
          <th scope="col">2018 Q2 </th>
          <th scope="col">2018 Q3 </th>
          <th scope="col">2018 Q4 </th>
          <th scope="col">2019 Q1 </th>
          <th scope="col">2019 Q2 </th>
          <th scope="col">2019 Q3 </th>
          <th scope="col">2019 Q4 </th>
          <th scope="col">2020 Q1 </th>
        </tr>
        <tbody>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
          <tr>
            <td>You</td>
            <td>53</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
          </tr>
        </tbody>
      </thead>
      <!--data and codes-->
    </table>
  </div>
</div>