Hydration Missing Node NG0502 nz-table comoponent

[abdullah-mjawaz]

Reproduction link

https://github.com/abdullah-mjawaz/nz-table-hydration

Steps to reproduce

render table component on the server causes the NG0502 error.

What is expected?

Render the table component on the server and hydrate the data on the client correctly.

What is actually happening?

when remove table header causes the the error to goes away.

Environment	Info
ng-zorro-antd	19.0.0-beta.0
Browser	chrome

[Laffery]

@abdullah-mjawaz There is a minimal reproduction:

<table>
  <col>
</table>

then we will get the following error

RuntimeError: NG0500: During hydration Angular expected <col> but found <colgroup>.

Angular expected this DOM:

<table _ngcontent-ng-c2283532919="">
  <col>…</col>  <-- AT THIS LOCATION
  …
</table>

Actual DOM is:

<table _ngcontent-ng-c2283532919="">
  <colgroup>…</colgroup>  <-- AT THIS LOCATION
</table>

Note: attributes are only displayed to better represent the DOM but have no effect on hydration mismatches.

To fix this problem:
  * check the "_AppComponent" component for hydration-related issues
  * check to see if your template has valid HTML structure
  * or skip hydration by adding the `ngSkipHydration` attribute to its host node in a template

For nz-table, https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/table/src/table/table-content.component.ts#L19
there is a list of <col> defined in the nz-table-content directive without <colgroup> tag wrapped, angular will render it as follows in the server side:

<nz-table-inner-default class="ant-table-container" ng-reflect-table-layout="auto" ng-reflect-list-of-col-width=",,," ng-reflect-thead-template="[object Object]" ng-reflect-content-template="[object Object]" ngh="2">
  <div class="ant-table-content">
    <table nz-table-content="" ng-reflect-content-template="[object Object]" ng-reflect-table-layout="auto" ng-reflect-list-of-col-width=",,," ng-reflect-thead-template="[object Object]" style="table-layout: auto;" class="" ngh="1">
      <col>
      <col>
      <col>
      <col>
      <thead class="ant-table-thead">
        <tr _ngcontent-ng-c309687989="" class="ant-table-row">
          <th _ngcontent-ng-c309687989="" class="ant-table-cell">Name</th>
          <th _ngcontent-ng-c309687989="" class="ant-table-cell">Age</th>
          <th _ngcontent-ng-c309687989="" class="ant-table-cell">Address</th>
          <th _ngcontent-ng-c309687989="" class="ant-table-cell">Action</th>
        </tr>
      </thead>
      <tbody _ngcontent-ng-c309687989="" class="ant-table-tbody" ngh="8">
        <!-- ... -->

To solve this problem, we should wrap the <col> tags in nz-table-content directive with a <colgroup> tag