Asked  7 Months ago    Answers:  5   Viewed   40 times

I am trying to make a table with fixed header and a scrollable content using the bootstrap 3 table. Unfortunately the solutions I have found does not work with bootstrap or mess up the style.

Here there is a simple bootstrap table, but for some reason to me unknown the height of the tbody is not 10px.

height: 10px !important; overflow: scroll;

Example:

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody style="height: 10px !important; overflow: scroll; ">
    <tr>
        <td class="filterable-cell">111 Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>
    
</table>

 Answers

69

Here is the working solution:

table {
    width: 100%;
}

thead, tbody, tr, td, th { display: block; }

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;

    /*text-align: left;*/
}

tbody {
    height: 120px;
    overflow-y: auto;
}

thead {
    /* fallback */
}


tbody td, thead th {
    width: 19.2%;
    float: left;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Make</th>
            <th>Model</th>
            <th>Color</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
    </tbody>
</table>

Link to jsfiddle

Tuesday, June 1, 2021
 
NaeiKinDus
answered 7 Months ago
10

what you could do is a bit of visual trick to achieve this, use two div tags

<div class="Headers">
  <table class="NewHeader">
    <tr>
    </tr>
  </table>
</div>
<div class="Table">
  <table class="MyTable">
    <tr>
      <th>
      </th>
      ...
    </tr>
    <tr>
      <td>
      </td>
      ...
    </tr>
</div>

now with a bit of JavaScript or JQuery you can get the th, set its width to match the cell width, and move the th cell to the "Headers" table

$(document).ready(function(){
    var counter = 0;
    $(".MyTable th").each(function(){
        var width = $('.MyTable tr:last td:eq(' + counter + ')').width();
        $(".NewHeader tr").append(this);
        this.width = width;
        counter++;
    });
});

now only is left to do is to style the div "Table" with overflow, so now if you would scroll the second table the header will remain in place, i used jquery to simplify the readability, but can be done in JavaScript is same way

Live Demo

Example with automatic vertical scroll body and header

Wednesday, July 28, 2021
 
dimitarvp
answered 4 Months ago
48

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;
}
Saturday, August 28, 2021
 
agryson
answered 3 Months ago
47

I could specifiy a pixel value for the CSS top property but this makes it more rigid.

Yes, but this is what you want, isn't it?

That's really the only solution.

Monday, August 30, 2021
 
Stubbi
answered 3 Months ago
64

I don't think container class is meant to be used inside tables. I would just place the entire table inside a .container and lengthen the stripes using pseudo elements. With the default table-striped from bootstrap, that would look something like this:

.table-striped td:first-child,
.table-striped th:first-child,
.table-striped td:last-child,
.table-striped th:last-child {
   position: relative;
}

.table-striped td:first-child:before,
.table-striped th:first-child:before,
.table-striped td:last-child:after,
.table-striped th:last-child:after {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -2px;
    width: 100vw;
    display: block;
    background: inherit;
    border: inherit;
}
.table-striped td:first-child:before,
.table-striped th:first-child:before {
    right: 100%;
}
.table-striped td:last-child:after,
.table-striped th:last-child:after {
    left: 100%
}

And the updated fiddle: http://jsfiddle.net/4L4tatk5/8/

Note that you may have to change that 100vw (= 100% of vertical width) to some other unit (just a ridiculously high 9999pxor something) if you need to support

Sunday, November 21, 2021
 
dance2die
answered 1 Week ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share