can i add a scroll to striped table (boostrap) in html? - html

Question

I need to use a striped table (boostrap) but with a scroll. In my code, i just call the class table-striped and the tables looks fine. Now i need to add a scroll to that same table keeping the same style. Is that posible? how?
Here is some of my code
<div class="row col-sm-12">
<div class="col-sm-7">
<div class="table-responsive">
<table class="table table-hover 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">Escor</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2001</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I don't know where to find the css code. I used a boostrap template.

Answer 1

Set a height and overflow-y: scroll in your style
table {
height: 30px;
overflow-y: scroll;
}
when data loading and the space are not enough for data, table will show a scroll.
<table style="border: 1px solid red">
<thead>
<tr>
<td>Header stays put, no scrolling</td>
</tr>
</thead>
<tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
<tr>
<td>cell 1/1</td>
<td>cell 1/2</td>
</tr>
<tr>
<td>cell 2/1</td>
<td>cell 2/2</td>
</tr>
<tr>
<td>cell 3/1</td>
<td>cell 3/2</td>
</tr>
</tbody>
</table>