What is the difference between component 'mat-table' and the directive '<table mat-table>'?

Question

<mat-table>
<table mat-table ...>

I found a similar question Should I use "<table mat table ... " or "<mat-table ...", but I still have a misunderstanding. Angular Material website https://material.angular.io/components/table/overview#tables-with-code-display-flex-code- has a small note:

Note that this approach means you cannot include certain native-table >features such colspan/rowspan or have columns that resize themselves based on >their content.

But I don’t understand what:

or have columns that resize themselves based on their content means.

Could you please give an example of this, what are the columns that are resizing?

Ultimately, I want to achieve the correct display of tables on mobile devices (with the mat-table component this is easier to do, because he uses Flex), here is an example of this https://stackblitz.com/edit/angular-mohmt5?file=app%2Ftable-basic-example.ts And I want to immediately understand what difficulties may be in view of the notes above.

Answer 1

From the source if you see the directive's selector can use as an element mat-table or as an attribute to table table[mat-table]

@Component({
  ...
  selector: 'mat-table, table[mat-table]',
  ...
})
export class MatTable<T> extends CdkTable<T> {}

---

Option 1: mat-table: When you use as an element it uses CSS flex-box properties to align your data/table so when you have very long text it will not resize automatically unless specified otherwise. Note using this option you have to compromise on rowspan and colspan such as if the need arises you can't span your rows/cols

Stackblitz: https://stackblitz.com/edit/angular-prq2ju

Option 2: table[mat-table]: When you use as an attribute to html table the td takes care of auto resizing its content based on the cell in turn based to the column. So the whole column gets the width

Stackblitz: https://stackblitz.com/edit/angular-pxpwet

---

The modern approach would be to use the Option-1 CSS flex-box approach, but if you have very long content in cell you can specify the column width to a large number, but if you don't want to go to a lot of hassle you can use it with Option-2 native html table/tr/td