我Map表上的值,我希望表有滚动条时,它达到一些最大高度,添加溢出:滚动条,宽度最大高度:600px不起作用,表格只是不断向下延伸第一个我也试着放在tbody上也不起作用
4nkexdtk1#
将map函数的所有返回值放在一个div with scrollit样式类中,并将以下代码添加到CSS中:
.scrollit { overflow:scroll; height:100px; }
您代码如下所示:
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>
1条答案
按热度按时间4nkexdtk1#
将map函数的所有返回值放在一个div with scrollit样式类中,并将以下代码添加到CSS中:
您代码如下所示: