Using Ellipsis in Angular Material Table

Question

By default, Angular Material Table puts content in a new line below if it overflows from the cell it is contained in. I'm trying to set it so that the overflowing text gets truncated with "..." instead. The code I have right now doesn't truncate the content and displays it in one line until it overflows out of the parent <div>

I'm using <table mat-table> instead of <mat-table> because it has columns that resize themselves based on their content as described in Angular Material Website. The table I'm trying to create is responsive and resizes itself based on the size of its parent <div>

HTML:

<div class="table-content">
  <table mat-table [dataSource]="dataSource" class="table-container">
    <ng-container [matColumnDef]="item" *ngFor="let item of displayedColumns">
      <th mat-header-cell *matHeaderCellDef>{{item}} </th>
      <td mat-cell *matCellDef="let element">
        <div class="table-data-content">
          <span>{{element[item]}}</span>
        </div>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

CSS:

.table-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.table-data-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Sample data used in Angular Component:

  dataSource = [
    { Name: "Some file name that is very long", Date: '08/30/2017', Uploader: 'Some uploader name that is very long'},
    { Name: "Some file name that is very long", Date: '08/30/2017', Uploader: 'Some uploader name that is very long'}
  ];

  displayedColumns = ['Name', 'Date', 'Uploader'];

What could I fix to appropriately use ellipsis in my table?

Update: The ellipsis works if I add the following css, which I am still not sure why.

td {
max-width: 0px;
}

However, this approach disrupts the way Angular Material Table efficiently assigns the width of each column based on the length of the content so that the content gets truncated when the other column still has a lot of empty space left. Is there better solution to this?

Answer 1

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.

Answer 2

You can define an in-line style as follows:

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