Using Ellipsis in Angular Material Table

Your number one issue is that you're applying your width and height on "table-content" instead, you need to apply it directly to the table tag.

Try this:

table {
  width: 100%;
  table-layout: fixed;
}

th, td {
  overflow: hidden;
  width:auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

on table tag use table-layout: fixed is applied, the content no longer dictates the layout, but instead, the browser uses any defined widths from the table's first row to define column widths.

You can define an in-line style as follows:

style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;"