使表格的特定正文可滚动？

Question

我的问题有点困难，因为这似乎是嵌套的，溢出在外部，我希望它在内部。 这是在reactjs上，我在其中循环。

  

溢出应在内部的第二个（基于循环）   

            <table className='scroll-table'>
                <thead style={{'display':'table','width':'100%'}}> 
                    <tr> 
                        <th style={{'width':'20%'}}>
                            Product
                        </th>
                        <th style={{'width':'8%'}}>
                            Doc. No
                        </th>
                        <th style={{'width':'8%'}}>
                        Quantity
                        </th>
                    </tr>
                </thead>
                {this.props.data.map((item,idx)=>{
                    return(
                    <tbody key={idx} className="scrollbar">
                        <tr>
                            <td style={{'width':'2%'}}>
                                <input name="product type="text" />
                            </td>
                        </tr>
                    item.detail.map((i,index)=>{
                        return(
                            <tr key={index} >
                                <td colSpan="2"></td>
                                <td>{i.document_no}</td>
                                <td >{i.quantity}</td>

                            </tr>
                        )
                    })
                </tbody>
                    )

                })}
            </table>

CSS：

.scroll-table tbody{
  display:inline-block;
  overflow:auto;
  max-height:150px;
  width: 100%;
}
.scroll-table th{
  width: 100%;
}