I am using bootstrap table in my react application. But the table is not scrollable now. Whenever content gets loaded into it, it increases it height to accommodate the content. I want to make i scrollable. This is my table component
<div className='flex-vertical'>
<Table className='flags-table' responsive hover>
<thead>
<tr>
<th></th>
<th> Time In</th>
<th> Time Out</th>
<th> Type</th>
<th> Category</th>
</tr>
</thead>
<tbody>
{
that.props.tag_fetch_reducer.tags.map((x, i) => (
<tr key={i} onClick={this.handleRowClick.bind(this, i)}>
<td>
<div className='red-box'></div>
</td>
<td> {this.secondsToHms(x.time)} </td>
<td> {this.secondsToHms(x.stopTime)} </td>
<td> {x.tagname} </td>
<td contentEditable="false"> {x.category}</td>
</tr>
))
}
</tbody>
</Table>
and this is stylus part for this much code
.flex-vertical
display flex
flex-direction column
height 100%
.flags-table
.red-box
width 16px
height 16px
margin 3px 5px
background-color red
After implementing solution from comments I am getting this
I did this
.flex-vertical
display flex
flex-direction column
height 100%
Table ,tr td{
}
tbody {
display:block;
height:50px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
