Fixed Table Header using CSS

Question

How to have a fix thead at the top? I tried the below script but it didn't fixed on scrolling.

thead {
  position: sticky;
  top: 0;
  background: khaki;
  color: white;
}

<table class="table table-striped table-hover table-bordered text-center">
  <thead>
    <tr>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
    </tr>
    <tr>
      <th>gfdg</th>
      <th>gdrgr</th>
      <th>segsre</th>
      <th>gfrdg</th>
      <th>srgdr</th>
      <th>egrsdg</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>


    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>


    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>


    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
  </tbody>
</table>

How to have a fix thead at the top? I tried the above script but it didn't fixed on scrolling.

Answer 1

table {
   width: 100% (or the preferred value);
}

thead {
    position: fixed;
    top: 0;
    background: khaki;
    color: white;
    width: 100%;
}

Answer 2

It is impossible to manipulate thead element. Only elements of th individually.

thead tr:first-child th {
  position: sticky;
  top: 0;
}

thead th {
  position: sticky;
  top: 20px;
  background: khaki;
  color: white;
}

<table class="table table-striped table-hover table-bordered text-center">
  <thead>
    <tr>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
      <th><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
    </tr>
    <tr>
      <th>gfdg</th>
      <th>gdrgr</th>
      <th>segsre</th>
      <th>gfrdg</th>
      <th>srgdr</th>
      <th>egrsdg</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>


    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>


    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>

    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>


    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">7</td>
      <td class="font-elephant">9</td>
      <td class="font-elephant">585</td>
      <td class="font-elephant">656</td>

      <td>65654
      </td>
    </tr>
  </tbody>
</table>

Or add the two tr into one.

<thead>
  <tr>
    <th>
      <input class="form-control" id="myInput" type="text" placeholder="Search..">
      <div>gfdg</div>
    </th>
    ...

And then only this style is enough.

thead th {
  position: sticky;
  top: 0;
  background: khaki;
  color: white;
}

Answer 3

I have made another solution if you want to check it here:

https://codepen.io/patridc/pen/aeLGbo

thead{
    top: 0;
    z-index: 1;
}

<table class="table table-striped table-hover table-bordered text-center">
    <thead class="position-sticky d-block bg-white">
        <tr class="d-flex bg-white">
  <th class="col-md-2"><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
  <th class="col-md-2"><input class="form-control" id="myInput" type="text" placeholder="Search.."></>
  <th class="col-md-2"><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
  <th class="col-md-2"><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
  <th class="col-md-2"><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
  <th class="col-md-2"><input class="form-control" id="myInput" type="text" placeholder="Search.."></th>
</tr>
<tr class="d-flex">
  <th class="col-md-2">gfdg</th>
  <th class="col-md-2">gdrgr</th>
  <th class="col-md-2">segsre</th>
  <th class="col-md-2">gfrdg</th>
  <th class="col-md-2">srgdr</th>
  <th class="col-md-2">egrsdg</th>
</tr>
</thead>
<tbody class="mt-50 d-block">
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
<tr class="d-flex">
  <td class="font-elephant col-md-2">1</td>
  <td class="font-elephant col-md-2">7</td>
  <td class="font-elephant col-md-2">9</td>
  <td class="font-elephant col-md-2">585</td>
  <td class="font-elephant col-md-2">656</td>
  <td class="font-elephant col-md-2">65654</td>
</tr>
</tbody>
</table>