angular - How do I set my mat-table CSS column width to only take up as much space as the data?

Question

I have an Angular 9 mat-table that looks like below

<mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="category">
      <mat-header-cell *matHeaderCellDef> category </mat-header-cell>
      <mat-cell *matCellDef="let item">{{ item.category.path }}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="title">
      <mat-header-cell *matHeaderCellDef> item </mat-header-cell>
      <mat-cell *matCellDef="let item"><a href='{{ item.path }}'>{{ item.title }}</a></mat-cell>
    </ng-container>

    <ng-container matColumnDef="price">
      <mat-header-cell *matHeaderCellDef> price </mat-header-cell>
      <mat-cell *matCellDef="let item">{{ item.created_on }}</mat-cell>
    </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

I have the following style for various columns that set fixed widths for each column

.mat-column-title {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 50% !important;
  width: 50% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

How can I structure my CSS so that the column will only take up as much width as the data occupies? That is, I don't want to specify a fixed pixel or percentage for each column. NOt sure if this is possible or not.

question from:https://stackoverflow.com/questions/65893183/how-do-i-set-my-mat-table-css-column-width-to-only-take-up-as-much-space-as-the

Answer 1

CSS Tables by default will only take up as much space as the data in the table. If you set the table to have a width of auto instead of 100%, the table will take up only as much space as it needs.

For example, this is the basic blitz they have for the Mat Table, but without width: 100% on the table.

https://stackblitz.com/edit/angular-zf9gev?file=src/app/table-basic-example.css

table {
  border-collapse: collapse;
}

td {
  border-top: 1px solid grey;
}

th {
  text-align: left;
}

<div>100% width</div>

<table style="width: 100%;">
  <thead>
    <tr>
      <th>No.</th>
      <th>Name</th>
      <th>Weight</th>
      <th>Symbol</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Hydrogen</td>
      <td>1.0079</td>
      <td>H</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Helium</td>
      <td>4.0026</td>
      <td>He</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Lithium</td>
      <td>6.941</td>
      <td>Li</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Beryllium</td>
      <td>9.0122</td>
      <td>Be</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Boron</td>
      <td>10.811</td>
      <td>B</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Carbon</td>
      <td>12.0107</td>
      <td>C</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Nitrogen</td>
      <td>14.0067</td>
      <td>N</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Oxygen</td>
      <td>15.9994</td>
      <td>O</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Fluorine</td>
      <td>18.9984</td>
      <td>F</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Neon</td>
      <td>20.1797</td>
      <td>Ne</td>
    </tr>
  </tbody>
</table>

<div>Auto Width</div>

<table>
  <thead>
    <tr>
      <th>No.</th>
      <th>Name</th>
      <th>Weight</th>
      <th>Symbol</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Hydrogen</td>
      <td>1.0079</td>
      <td>H</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Helium</td>
      <td>4.0026</td>
      <td>He</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Lithium</td>
      <td>6.941</td>
      <td>Li</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Beryllium</td>
      <td>9.0122</td>
      <td>Be</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Boron</td>
      <td>10.811</td>
      <td>B</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Carbon</td>
      <td>12.0107</td>
      <td>C</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Nitrogen</td>
      <td>14.0067</td>
      <td>N</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Oxygen</td>
      <td>15.9994</td>
      <td>O</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Fluorine</td>
      <td>18.9984</td>
      <td>F</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Neon</td>
      <td>20.1797</td>
      <td>Ne</td>
    </tr>
  </tbody>
</table>