使用 ReactJS 和 Skeleton 滚动表格 Css

Question

我在尝试让滚动 table 在 React JS 中工作时遇到问题。我也在用骨架。我只提到这一点，以防与骨架和滚动 table 发生某种我不知道的冲突。

我目前有以下 React JS 组件：

HistoryContainer.jsx

    import React from 'react'; 

    import HistoryItem from './historyItem';

        export default class HistoryContainer extends React.Component {
             render(){
                 var self=this;
                return (
                  <div>
                      <h6><strong>{'Service History'}</strong></h6>
                      <table>
                      <tbody styles={'height: 100px; overflow: scroll;'}>
                      {

                        self.props.historyItems.map(function(historyItem) 
                        {
                          return ( 
                                  <HistoryItem  historyItem={historyItem}/>
                                )                              
                        })

                      }
                      </tbody>
                      </table>
                  </div>
                        );
                     } }

HistoryItem.jsx:

import React from 'react';

export default class HistoryItem extends React.Component{

  convertDate(data)
  {
     var d= new Date(data);
     return (d.getMonth()+1)+'\'+d.getDate()+"\"+ d.getFullYear();
  }
  render(){

       if(this.props.historyItem.WorkPerformedSummary==='')
       {
        return null;
       }

       return( 
          <div className='row'>
                <tr>
                      <td><strong>{this.props.historyItem.WorkPerformedSummary}</strong></td>


                      { this.props.historyItem.CompletedDate ? <td>
                                  {this.convertDate(this.props.historyItem.CompletedDate)}
                                  </td>: <td> {'n/a'} </td>  }

                </tr>
          </div>
          );
  }
}

所以，我的问题是，即使使用 <tbody> 中的样式，我也无法让 HistoryContainer.jsx 内部的 table 具有滚动条。有什么想法吗？

谢谢

Answer 1

您需要将 tbody 转换为块级元素，以便它们可以滚动。尝试将 display: block; 添加到 tbody 和 thead。

Answer 2

成功了。我不得不将我的代码更改为此

<tbody style={{'height': '300px', 'overflow':'scroll', 'display': 'block'}}>

还有

<thead style={{'display': 'block'}}>

使用 ReactJS 和 Skeleton 滚动表格 Css

Scrolling tables using ReactJS and Skeleton Css

javascript

css

skeleton-code

reactjs