JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cost_center">
    <table>
      <thead>
        <tr>
          <th class="nombre">cost_center</th>
          <th class="cabecera cc">Personal</th>
          <th class="cabecera cc">Dptoretyuytrew</th>
        </tr>
      </thead>
      <tbody>
        <tr><td class="nombre">10</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">11</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">12</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">13</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">14</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">15</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">16</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">17</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">18</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">19</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">20</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">21</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">22</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">10</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">10</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">10</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">10</td><td class="cc">column 2</td><td class="cc">column 3</td></tr>
        <tr><td class="nombre">10</td><td...

CSS

div.cost_center{
  overflow-y: auto;
  overflow-x: hidden;
  max-height:300px;  
}

div.cost_center table{
  width:300px;
}

div.cost_center table tr{
  height:16px;
}
div.cost_center th{
  font-weight:normal;
}

div.cost_center table tbody{
  display: block;
  overflow: auto;
  max-height:240px;
}

div.cost_center table thead{
  display:block;
}

div.cost_center .cc{
  width:60px;
  text-align: center; 
  border: 1px solid #999;
}

div.cost_center .nombre{
  width:150px;
}
div.cost_center tbody .nombre{
  border: 1px solid #999;
}

div.cost_center table th, 
div.cost_center table td { 
  padding: 2px;
  vertical-align: middle; 
}

div.cost_center table tbody td {
  white-space: normal;
  font:  .8em/1.4em Verdana, sans-serif;
  color: #000;
  background-color: white;
}
div.cost_center table th.cabecera { 
  font:  0.8em/1.4em Verdana, sans-serif;
  color: #000;
  background-color: #FFEAB5;
}