Datatable LWC tbody in another component

Question

I am trying to use another component in tbody for a custom data Table in LWC when i use /iterate records in tbody , it is renderinng fine and giving expected result

Single Component

<template>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
    <thead>
        <tr class="slds-line-height_reset">
            <th class="" scope="col">
                <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Account Name">Account Name</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Close Date">Close Date</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Stage">Stage</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="slds-hint-parent">
            <th data-label="Opportunity Name" scope="row">
              <div class="slds-truncate" title="Cloudhub">
                <a href="#" tabindex="-1">Cloudhub</a>
              </div>
            </th>
            <td data-label="Account Name">
              <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
            </td>
            <td data-label="Close Date">
              <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Prospecting">
              <div class="slds-truncate" title="Prospecting">Prospecting</div>
            </td>
        </tr>
        <tr class="slds-hint-parent">
            <th data-label="Opportunity Name" scope="row">
              <div class="slds-truncate" title="Cloudhub">
                <a href="#" tabindex="-1">DataView</a>
              </div>
            </th>
            <td data-label="Account Name">
              <div class="slds-truncate" title="Cloudhub">DataAccount</div>
            </td>
            <td data-label="Close Date">
              <div class="slds-truncate" title="4/14/2015">1/14/2018</div>
            </td>
            <td data-label="Prospecting">
              <div class="slds-truncate" title="Prospecting">Negotiations</div>
            </td>
        </tr>
    </tbody>
</table>

But when i put all body code in another component,

PARENT CMP

<template>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
    <thead>
        <tr class="slds-line-height_reset">
            <th class="" scope="col">
                <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Account Name">Account Name</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Close Date">Close Date</div>
            </th>
            <th class="" scope="col">
                <div class="slds-truncate" title="Stage">Stage</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <c-data-table-entries></c-data-table-entries>
    </tbody>
</table>

CHILD CMP

<template>
<tr class="slds-hint-parent">
    <th data-label="Opportunity Name" scope="row">
      <div class="slds-truncate" title="Cloudhub">
        <a href="#" tabindex="-1">Cloudhub</a>
      </div>
    </th>
    <td data-label="Account Name">
      <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
    </td>
    <td data-label="Close Date">
      <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
    </td>
    <td data-label="Prospecting">
      <div class="slds-truncate" title="Prospecting">Prospecting</div>
    </td>
</tr>
<tr class="slds-hint-parent">
    <th data-label="Opportunity Name" scope="row">
      <div class="slds-truncate" title="Cloudhub">
        <a href="#" tabindex="-1">DataView</a>
      </div>
    </th>
    <td data-label="Account Name">
      <div class="slds-truncate" title="Cloudhub">DataAccount</div>
    </td>
    <td data-label="Close Date">
      <div class="slds-truncate" title="4/14/2015">1/14/2018</div>
    </td>
    <td data-label="Prospecting">
      <div class="slds-truncate" title="Prospecting">Negotiations</div>
    </td>
</tr>

it is rendering like below

Answer 1

This is happening because you have another element in the structure, the child component, with its shadow DOM. The output (ignoring shadow DOM boundaries) is structured something like this:

<c-parent>
  <table>
    ...
    <tbody>
      <c-data-table-entries>
        <tr>
          <td>...</td>
          ...
        </tr>
        ...
     </c-data-table-entries>
   </tbody>
  </table>
</c-parent>

Because there is a non-tabular element between the table body and the rows, the browser cannot render the table as you expect.

Making sure that c-data-table-entries is declared, via CSS, to render as a table row group should let the browser render correctly. Do this by adding the following to your c-data-table-entries LWC's CSS:

:host {
  display: table-row-group;
}

You need to also remove tbody from the parent, since the table-row-group CSS represents a tbody and the child component is now rendered as the tbody via CSS instead.