Scrollable html table

Question

I'm having some issues making my tbody scrollable

Heres what i have

.scroll {
overflow: auto;
height: 200px;
display: block;
}

The scroll is on the tbody.

Heres the result

Any ideas on how to fix this?

The rest of my css is standard bootstrap, The class is table table-hover

Thanks Sam

Answer 1

I designed a lightweight and useful HTML table template. As a example, I used a Rio de Janeiro olympic game theme :) Enjoy!

CSS

<style>
  #grid {
    width: 100%; /* <-- Grid width */
    background-color: yellow; /* Grid background color */
    border: 2px solid lightgray; /* Grid external border color */
    overflow-y: hidden; /* <-- Do not change */
    overflow-x: auto; /* <-- Do not change */
    text-align: left; /* <-- Grid default text alignment */
    font-size: 18px; /* <-- Default text size */
  }
  #grid table {
    width: 100%; /* <-- Do not change */
    border-collapse: collapse; /* <-- Do not change */
  }
  #grid thead tr {
    background-color: yellowgreen; /* <-- Header background color */
    color: white; /* <-- Header font color */
    height: 40px; /* <-- Header height */
  }
  #grid thead, #grid tbody {
    display: block; /* <-- Do not change */
  }
  #grid tbody {
    height: 100px; /* <-- Modify here for grid height */
    overflow-x: hidden; /* <-- Do not change */
    overflow-y: auto; /* <-- Do not change */
    color: black; /* <-- Body font color */
  }
  #grid td, #grid th {
    padding: 8px; /* <-- Grid internal cell padding */
    border: 1px solid lightgray; /* <-- Grid internal border color */
    min-width: 100px; /* <-- Column default size except last one. */
  }
  #grid td:last-child, #grid th:last-child {
    width: 100%; /* <-- Do not change */
  }
  #grid tbody tr td:hover {
    background-color: lightskyblue; /* <-- Cell default color on MouseOver event */
    color: white; /* <-- Cell font color on MouseOver event */
  }
  #grid tbody tr:hover {
    background-color: steelblue; /* <-- Row default color on MouseOver event */
    color: white; /* Row font color on MouseOver event */
  }
</style>

HTML

<div id="grid">
<table>
  <thead>
  <tr>
    <th>Name</td>
    <th>Last name</td>      
    <th>Age</td>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  </tbody>
</table>
</div>

I hope I helped you!
Giuliano

Answer 2

You can make it scrollable by doing this:

Example HTML

<table class="table table-striped">
  <thead>
    <tr>
      <th>Lorem</th>
      <th>Lorem</th>
      <th>Lorem</th>
      <th>Lorem</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="">Ipsum</td>
      <td class="">dolor</td>
      <td class="">sit</td>
      <td class="">amit</td>
    </tr>
    <tr>
      <td class="">Ipsum</td>
      <td class="">dolor</td>
      <td class="">sit</td>
      <td class="">amit</td>
    </tr>
    <tr>
      <td class="">Ipsum</td>
      <td class="">dolor</td>
      <td class="">sit</td>
      <td class="">amit</td>
    </tr>
    <tr>
      <td class="">Ipsum</td>
      <td class="">dolor</td>
      <td class="">sit</td>
      <td class="">amit</td>
    </tr>
  </tbody>

</table>

CSS

table {
    width: 100%;
}

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

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

thead th {
    height: 30px;
}

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


tbody td, thead th {
    width: 19.2%;
    float: left;
}

Example JsFiddle

Hope this helps!