I have integrated a bootstrap table into my React application, but I am facing an issue where the table is not scrollable. Whenever new content is loaded, it increases the height of the table instead of making it scrollable. Below is the code for 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>
Additionally, here is the Stylus code for the above HTML:
.flex-vertical
display flex
flex-direction column
height 100%
.flags-table
.red-box
width 16px
height 16px
margin 3px 5px
background-color red
After following the solution provided in the comments, this is the result I am seeing:
https://i.sstatic.net/6dMiB.png
I made the following modifications to the Stylus code:
.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 */
}