text ellipsis not working in css inside table

td:nth-child(1) {
    max-width: 130px !important;

    div {
      a {
        max-width: 120px !important;
        outline: 1px solid red;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

text ellipsis is not working , i tried using ellipsis inside td in table. it seems to work when width is not specified and ellipsis is applied in td(parent contaienr) i used width too still it dosent work

>Solution :

Make it "display: inline-block"

td div a {
  display: inline-block;
  width: 60px;
  outline: 1px solid red;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td>
      <div><a>Make it "display: inline-block"</a></div>
    </td>
  </tr>
</table>