How to group buttons inside a column into a table so that they do not change when the column is adjusted

Question

I have a table that has 4 action buttons inside a cell of a column. When the names start to get larger in character, the table starts to auto-adjust and in the Actions column, the 4 buttons are loose and some of them start to descend to the bottom row even though there is space left over in the column cell width. Is there a way to put them, like, inside some object so they’re always aligned according to the width of the cell?

.align-center {
    text-align: center;
    /*max-width: 80px*/
}

Answer 1

Add white-space: nowrap; to the table column. The nowrap prevents white spaces from breaking to the next line.

Example without white-space: nowrap;:

.icones{
   display: inline-block;
   width: 25px;
   height: 25px;
   background: red;
}

<table width="50%" border="1">
   <tr>
      <td width="50">
         1
      </td>
      <td>
         Jurídica
      </td>
      <td>
         nome nome nome nome
      </td>
      <td>
         nome nome nome nome nome nome nome nome
      </td>
      <td align="center">
         <span class="icones"></span>
         <span class="icones"></span>
         <span class="icones"></span>
         <span class="icones"></span>
      </td>
   </tr>
</table>

Example with white-space: nowrap;:

.icones{
   display: inline-block;
   width: 25px;
   height: 25px;
   background: red;
}

<table width="50%" border="1">
   <tr>
      <td width="50">
         1
      </td>
      <td>
         Jurídica
      </td>
      <td>
         nome nome nome nome
      </td>
      <td>
         nome nome nome nome nome nome nome nome
      </td>
      <td align="center" style="white-space: nowrap;">
         <span class="icones"></span>
         <span class="icones"></span>
         <span class="icones"></span>
         <span class="icones"></span>
      </td>
   </tr>
</table>