Html 嵌套表中的表大小相同

我创建了元素数量未知的嵌套表（Priming组件），这是我的代码：

    <p-table [value]="topicReports" dataKey="topicName">
    <ng-template pTemplate="header">
        <tr>
            <th class="is-header">Topic / Comment / Author </th>
            <th class="is-header">Points</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-topic>
        <tr >
            <td>{{topic.name}}</td>
            <td >{{topic.point}}</td>
        </tr>
        <td colspan="2">
            <p-table *ngIf="topic.commentReports" [value]="topic.commentReports" dataKey="commentName">
                <ng-template pTemplate="body" let-comment>
                    <tr clas="background-color">
                        <td class="pl-4">{{comment.name}}</td>
                        <td >{{comment.point}}</td>
                    </tr>
                    <td colspan="2">
                        <p-table *ngIf="comment.authorReports" [value]="comment.authorReports" dataKey="authorName">
                            <ng-template pTemplate="body" let-author>
                                <tr *ngIf="author.point > 0" >
                                    <td class="pl-5">{{author.name}}</td>
                                    <td >{{author.point}}</td>
                                </tr>
                            </ng-template>
                        </p-table>
                    </td>
                </ng-template>
            </p-table>
        </td>
    </ng-template>
    <ng-template pTemplate="summary">
        <div style="text-align: right">
            Summary points: {{summaryPoints}}
        </div>
    </ng-template>
</p-table>

这些是我的目标：

import { CommentReport } from "./comment-report";

export class AuthorReport {
  constructor(
    public name: string,
    public points: number,
    public CommentReports: CommentReport[]
  ) {  }
}

import { AuthorReport } from "./author-report";

export class CommentReport {
  constructor(
    public name: string,
    public points: number,
    public authorReports: AuthorReport[]
  ) {  }
}

export class AuthorReport {
  constructor(
    public name: string,
    public points: number
  ) {  }
}

我的CSS文件是清晰的（完全清晰，里面没有任何内容，因为所有CSS可能都是

p-table中的
build-in
组件，来自
priming

我需要说的是，我也试着用我的网络浏览器进行检查，但我没有找到任何可以指向任何填充属性的东西，但我不确定我是否做对了。
我在元素上按下右键，然后检查，我在样式视图中搜索类似于填充的内容，但没有找到任何内容。这就是我在那里找到的内容：



2018年11月28日更新：

@Kosh Very在其回答中建议的更改使表格看起来如下：


现在table-in-table中有一个可见的表，我只想让嵌套表成为第一个表中的一行（就像在第一个示例中一样，但没有这个缩进）

@Kosh Very评论后的第二次更新

为什么要使用嵌套表

（我不确定您是否需要知道，但我不知道一个表中有多少主题，我也不知道有多少评论有一个主题，有多少评论有一个评论）

我尝试在没有嵌套表的情况下执行此操作，如下所示：

<div *ngIf="tableGenerated">
    <div class="pt-4">
        <p-table [value]="topicReports" dataKey="topicName">
            <ng-template pTemplate="header">
                <tr>
                    <th class="is-header"> topic / comment / author</th>
                    <th class="is-header"> points</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-topic>
                <tr class="background-color">
                    <td>{{topic.name}}</td>
                    <td class="is-number">{{topic.point}}</td>
                </tr>
                <tr class="background-color">
                    <td>{{topic.commentReports.name}}</td>
                    <td class="is-number">{{topic.commentReports.point}}</td>
                </tr>
                <tr class="background-color">
                    <td>{{topic.commentReports.authorReports.name}}</td>
                    <td class="is-number">{{topic.commentReports.authorReports.point}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>


主题/评论/作者
要点
{{topic.name}
{{topic.point}}
{{topic.commentReports.name}
{{topic.commentReports.point}
{{topic.commentReports.authorReports.name}
{{topic.commentReports.authorReports.point}

但我似乎无法执行以下操作：
topic.commentReports.authorReports.point
这就是我创建嵌套表的原因。
您的模板代码不正确：

HTML表格单元格
需要放在行中
，但您遗漏了一些

此外，您不能直接将
放入
中。

因此，您需要将其包装到一个单元格中，然后将该单元格包装到一行中，然后将该行放入表中

@degath找到的最终溶液：

<p-table [value]="topicReports" dataKey="topicName">
  <ng-template pTemplate="header">
    <tr>
      <th>task / comment / author</th>
      <th>points </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-topic>
    <tr class="background-color">
      <td>{{topic.name}}</td>
      <td class="is-number">{{topic.workedHour}}</td>
    </tr>
    <ng-template ngFor let-comment [ngForOf]="topic.commentReports">
      <tr class="background-color">
        <td class="pl-4">{{comment.name}}</td>
        <td class="is-number">{{comment.workedHour}}</td>
      </tr>
      <ng-template ngFor let-author [ngForOf]="comment.authorReports">
        <tr class="background-color">
          <td class="pl-4">{{author.name}}</td>
          <td class="is-number">{{author.workedHour}}</td>
        </tr>
      </ng-template>
    </ng-template>
  </ng-template>
</p-table>


任务/评论/作者
要点
{{topic.name}
{{topic.workedHour}
{{comment.name}
{{comment.workedHour}
{{author.name}
{{author.workedHour}
表格单元格有一个默认的填充，这很可能是原因所在。如果您想得到更准确的答复，请提供呈现的HTML及其CSS作为，因为我们无法调试图像。@LGSon p-Table是角度/素数表格组件，我认为HTML+CSS不足以运行/调试它。因为您的标记将依赖于设置的CSS，而我们无法看到它虽然你没有发布，但它是高度相关的。你是否使用浏览器的开发工具检查渲染结果？…因为这很可能会显示发生了什么。CSS是空的（看起来angular/Priming/p-table有自己的CSS，所以我想我需要覆盖一些CSS属性。但就像你提供的一样，我调查了这个专栏，并没有发现任何可能指向某些填充的内容，但这是一个非常好的主意。我将再次调查，并拍摄一个屏幕截图。也许这会有帮助。@degath所有CSS属性该表的属性将在前端可用，并且可以在控制台中进行检查。即使没有显式设置属性，也会在浏览器中内置默认值。首先，感谢您的时间！我为您更新了一个问题。@degath，感谢您的更新！那么您为什么不删除嵌套表？好问题！我会回答您的r我的问题又来了。@degath，我已经用扁平化的模板更新了我的答案。我更新了我的答案，但看起来你在我的脑海里阅读。我想你已经成就了我的一天……看起来这就是我要寻找的。如果答案能如预期的那样工作，我会尽快接受。
<p-table [value]="topicReports" dataKey="topicName">
  <ng-template pTemplate="header">
    <tr>
      <th>task / comment / author</th>
      <th>points </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-topic>
    <tr class="background-color">
      <td>{{topic.name}}</td>
      <td class="is-number">{{topic.workedHour}}</td>
    </tr>
    <ng-template ngFor let-comment [ngForOf]="topic.commentReports">
      <tr class="background-color">
        <td class="pl-4">{{comment.name}}</td>
        <td class="is-number">{{comment.workedHour}}</td>
      </tr>
      <ng-template ngFor let-author [ngForOf]="comment.authorReports">
        <tr class="background-color">
          <td class="pl-4">{{author.name}}</td>
          <td class="is-number">{{author.workedHour}}</td>
        </tr>
      </ng-template>
    </ng-template>
  </ng-template>
</p-table>