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

1

I have a table that has 4 action buttons inside a cell of a column. When the names begin to get larger in size, the table starts to auto-adjust and in the Actions column the 4 buttons are released and some of them begin to descend to the bottom line even though there is plenty of room in the width of the cell. column. Is there a way to put them, type, inside some object so that they always aligned according to the width of the cell?

.align-center {
    text-align: center;
    /*max-width: 80px*/
}
    
asked by anonymous 28.04.2018 / 21:22

1 answer

1

Add white-space: nowrap; to the table column. nowrap prevents whitespace 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>
    
28.04.2018 / 22:37