Adapt Height of a div that is inside a td

You can try this, I made a parent layer with the class .wrapper that includes the div with the class .role_color and the text, this layer occupies 100% of the height and width of the td and the td assign a specific height so that 100% of the .wrapper layer will take it, resulting in this:

.wrapper{
  height:100%;
  width:100%;
}

.role_color {
  align-items: stretch;
  display: inline-block;
  height: 100%;
  margin-right: 10px;
  position:relative;
  width: 2px;
}

table tr td{
 height:50px;
 padding:0; 
}

<table border="1" cellspacing>
  <tr>
    <td>
      <div class="wrapper">
        <div class="role_color" title="Prueba" style="background-color: #6a1b9a"></div>
        Nombre
      </div>
    </td>       
    <td>Apellido</td>
    <td>Pais</td>
  </tr>
</table>

It was the solution I could do, I hope it works for you.

I think your div is already using the height of your cell, because if you notice, you only see a yellow line (according to your image), the problem I see is that "Name" is outside the div, so both the div has the limit of width to the content of the cell, if you want the div to extend throughout the cell, just modify it like this:

<tr>
   <td height="50">
     <div class="role_color">
       Columna 1
     </div>
  </td>
  <td>Columna 2</td>
  <td>Columna 3</td>
</tr>

and your CSS: I edit so that regardless of the size of your cell, the div adapts to everything and the content (text) is always aligned with the other columns

.role_color {
display: inline-block;
align-items: stretch;
margin-right: 10px;
height:100%;
display: -webkit-flex;
display: flex;
align-items: center;
background-color: #6a1b9a;
}

Let us know if this is what you need to do. Greetings.

The cells are adapted to the size of the content and not vice versa, if you say that the div does not occupy 100% of the cell it is because the cell has padding or the div has margin and the solution would be to remove it

td {
  border: 1px solid red;
}

.border {
  border: 1px solid black;
}

.celdasSinPadd td, .celdasSinPadd th {
  padding: 0;
}

<table>
  <tr>
    <td>
      <div class="border">Contenido</div>
    </td>
  </tr>
</table>

<table class="celdasSinPadd">
  <tr>
    <td>
      <div class="border">Contenido 2</div>
    </td>
  </tr>
</table>