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.

I'm not sure if this is possible in pure CSS :( What I would do If I would really want to create a table with dynamic column widths, I think I would count characters in each column, take the max for each column, and then set width on each column based on max character using 'ch' unit — Maciej Wojcik, Jan 28 '21 at 10:46
It is fine if the solution isn't purely CSS based. In normal HTML I know this is absolutely possible, I just don't know how to structure my mat-table so it generates that kind of HTML. — satish, Jan 30 '21 at 16:26
Make encapsulation: ViewEncapsulation.None in you ts file @component. and then use css it will work as you expected — Msk Satheesh, Feb 03 '21 at 07:51
Here stackblitz example : https://stackblitz.com/edit/angular-ivy-cfuxer?file=src/app/app.component.ts — Msk Satheesh, Feb 03 '21 at 08:05

score 0 · Answer 1 · answered Feb 02 '21 at 05:12

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>

If you want to have the look of a full page table, but keep the columns of the size of their data, you have a few options. Two of which are: Make the last column of the table take up the remaining width, or add an extra column that does instead.

table {
  border-collapse: collapse;
}

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

th {
  text-align: left;
}

<div>Make the last column use the rest of the width to make it full sized</div>
<table style="width: 100%">
  <colgroup>
    <col>
    <col>
    <col>
    <col style="width:100%;">
  </colgroup>
  <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>Add an extra empty 100% width column to make it full sized</div>

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

Msk Satheesh · Answer 2 · 2021-02-02T02:09:26.977

Change your material table like follows.

app.component.html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="position">
        <th class="w-75" mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
        <th class="w-100" mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
        <th class="w-100" mat-header-cell *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
        <th class="w-75" mat-header-cell *matHeaderCellDef> Symbol </th>
        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
    </ng-container>

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

use th & td in your tables and use custom classes like i used.

<th class="w-75" mat-header-cell *matHeaderCellDef> Symbol </th>

app.component.css

.w-75 {
  width: 75px;
}

.w-100 {
  width: 100px;
}

Here the stackblitz example:

https://stackblitz.com/edit/angular-stysn7?file=src/app/app.component.html

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

2 Answers2