组件'mat-table‘和指令'<table mat-table>’之间有什么区别？

Question

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

我发现了一个类似的问题，Should I use "，但我仍然有一个误解。角材料网站https://material.angular.io/components/table/overview#tables-with-code-display-flex-code-有一个小提示：

请注意，这种方法意味着您不能包含某些本机表>特性，例如colspan/rowspan，也不能有根据>内容调整自身大小的列。

但我不明白是什么

或者让列根据其内容方式调整自身的大小。

请您举一个例子，哪些列正在调整大小？

最终，我想要在移动设备上实现表的正确显示(使用mat-table组件，因为他使用Flex)，下面是这个https://stackblitz.com/edit/angular-mohmt5?file=app%2Ftable-basic-example.ts的一个例子，我想立即了解考虑到上面的注释，可能会遇到什么困难。

Answer 1

在来源中，如果您看到指令的选择器可以用作元素mat-table或表table[mat-table]的属性

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

选项1：mat-table：当您使用CSS弹出框属性对齐数据/表时，除非另有规定，否则它不会自动调整大小。注意:使用此选项，您必须在rowspan和colspan上妥协，例如，如果需要的话，您不能跨越行/科尔。

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

选项2：table[mat-table]：当您将td用作html表的属性时，td负责根据单元格根据列自动调整其内容大小。所以整个列得到宽度

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

现在的方法是使用选项-1 CSS flex box方法，但是如果单元格中有很长的内容，可以将列的宽度指定为大量，但是如果您不想遇到很多麻烦，可以将其与选项-2本机html table/tr/td一起使用。