how to I add a scrollbar for the table - css

Question

i am mapping values on the table, i want the table to have scrollbar when it reaches some max-height,
adding overflow: scrollbar, width max-height: 600px did not work, the table just keeps extending downwards
return (
<div className='journaltable-div'>
<table className='table table-journal'>
<thead className='table-head'>
<tr className='table-head-row'>
<th>Task</th>
<th>Date-created</th>
<th>Action</th>
</tr>
</thead>
<tbody className='table-body'>
{ journalList.map((entry) => {
const { key, journal, time } = entry
return (
<tr key={key} className="table-body-row">
<td>{journal}</td>
<td>{time}</td>
<td><button
className='button button-complete'
onClick={(e) => {
e.stopPropagation
addToLog(key, "completed")
removeJournal(key)
}}>completed</button><button
className='button button-delete'
onClick={(e) => {
e.stopPropagation
addToLog(key, "deleted")
removeJournal(key)
}}>delete</button></td>
</tr>
)
}) }
</tbody>
</table>
<div className='redirect-div'>
<button className='redirect-logs' style={{cursor: 'pointer'}} onClick={() => {handleLogs()}}> Check Logs</button>
</div>
</div>
.table-journal {
overflow: scroll;
max-height: 600px;
}
also tried placing on tbody did not work either

Answer 1

put all of your return values from the map function in a div with scrollit style class and add these codes to your CSS:
.scrollit {
overflow:scroll;
height:100px;
}
your code have look like this:
return (
<div className='journaltable-div'>
<table className='table table-journal'>
<thead className='table-head'>
<tr className='table-head-row'>
<th>Task</th>
<th>Date-created</th>
<th>Action</th>
</tr>
</thead>
<tbody className='table-body'>
<div className="scrollit">
{ journalList.map((entry) => {
const { key, journal, time } = entry
return (
<tr key={key} className="table-body-row">
<td>{journal}</td>
<td>{time}</td>
<td><button
className='button button-complete'
onClick={(e) => {
e.stopPropagation
addToLog(key, "completed")
removeJournal(key)
}}>completed</button><button
className='button button-delete'
onClick={(e) => {
e.stopPropagation
addToLog(key, "deleted")
removeJournal(key)
}}>delete</button></td>
</tr>
)
}) }
</div>
</tbody>
</table>
<div className='redirect-div'>
<button className='redirect-logs' style={{cursor: 'pointer'}} onClick={() => {handleLogs()}}> Check Logs</button>
</div>
</div>