web-dev-qa-db-ja.com

Angular材料表での省略記号の使用

デフォルトでは、Angularマテリアルテーブルは、内容が含まれるセルからオーバーフローする場合、下の新しい行にコンテンツを配置します。オーバーフローするテキストが "で切り捨てられるように設定しようとしています。 .. "代わりに。今あるコードでは、コンテンツが切り捨てられず、親からオーバーフローするまで1行に表示されます<div>

Angular Material Website で説明されているように、コンテンツに基づいてサイズが変更される列があるため、<table mat-table>ではなく<mat-table>を使用しています。私が作成しようとしているテーブルは応答が速く、親のサイズに基づいてサイズが変更されます<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;
}

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'];

テーブルでEllipsisを適切に使用するために何を修正できますか？

更新：次のcssを追加すると省略記号が機能しますが、理由はまだわかりません。

td {
max-width: 0px;
}

ただし、このアプローチは方法を混乱させますAngular Material Tableはコンテンツの長さに基づいて各列の幅を効率的に割り当てるため、他の列にまだ多くの空きスペースがある場合にコンテンツが切り捨てられます残ります。これに対するより良い解決策はありますか？

cssangularhtml-tableangular-materialangular5
11
Sonul

最大の問題は、代わりに「table-content」に幅と高さを適用することです。これをtable tagに直接適用する必要があります。

これを試して：

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

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

on table tag use table-layout：修正が適用され、コンテンツはレイアウトを指示しなくなりましたが、代わりにブラウザはテーブルの最初の行から定義された幅を使用して定義します列幅。

9
Atom23