将标题制成组件后，角度表标题宽度不对齐

Question

这是一个基本表

<table class="table table-striped">

    <thead>
            <th scope="col">Name</th>
            <th scope="col">City</th>
            <th scope="col">State</th>
    </thead>
    <tbody>
        <tr *ngFor="let data of Array">
            <td>{{ data.name }}</td>
            <td>{{ data.city }}</td>
            <td>{{ data.state }}</td>
        </tr>
    </tbody>
</table>

但是当我将标题放到组件中时，标题的宽度与表列的宽度不匹配

<table class="table table-striped">

    <thead>
        <app-tableheader></app-tableheader>
    </thead>
    <tbody>
        <tr *ngFor="let data of Array">
            <td>{{ data.name }}</td>
            <td>{{ data.city }}</td>
            <td>{{ data.state }}</td>
        </tr>
    </tbody>
</table>

这是具有相同html的组件

<tr>
    <th scope="col">Name</th>
    <th scope="col">City</th>
    <th scope="col">State</th>
</tr>

所以我不太明白我在这里缺少什么。全新的角形游戏。