Fixed table header with scrolling on the body and button format inside

Hello, I am trying to generate a table in a reagent project with scrolling function in your body. So far the only thing I have achieved is to scroll the entire table. Does anyone help me with any suggestions on how to fix the header?

This is the table that I have:

This is an example of what I want:

Css Code:

.tablaListado {
  height: 300px !important;
  overflow-y: auto;
}

Component Code ListProducts:

import React, { Component } from 'react';
import Producto from './Producto';
class ListadoDeProductos extends Component{
   render(){
  return(
  <div className="col-md-6">
  <h3>Listado de Productos</h3>
  <div className="tablaListado">
          <table class="table table-hover">
    <thead>
      <tr>
        <th>Código</th>
        <th>Nombre</th>
        <th>Precio</th>
        <th>Acción</th>
      </tr>
    </thead>

    <tbody>
      {Object.keys(this.props.productos).map(key => 
      <Producto handleAddOrden={this.props.handleAddOrden}
      key={key} 
      index={key}
      detalles={this.props.productos[key]} />)
      }
     </tbody>  
    </table>
   </div>
</div>);
}
}
export default ListadoDeProductos;

Component Product:

import React, { Component } from 'react';

class Producto extends Component{
handleClick = () =>{
    this.props.handleAddOrden(this.props.index);
}
render(){
const {codigo, nombre, precio} = this.props.detalles;
return(
    <tr>
        <td>{codigo}</td>
        <td>{nombre}</td>
        <td>{precio}</td>
        <td><button className="addCard" onClick={this.handleClick}> + 
   Carro</button></td>
     </tr>
    );
  }
 }
 export default Producto;