How would you make a table row with an inner tr?

Help Requests
5

I am a little confused. :no_mouth:

The example code in the documentation states that the provided solutions are considered illegal:

Illegal Table Code:

<template>
  <table>
    <template repeat.for="customer of customers">
      <tr>
        <td>${customer.fullName}</td>
      </tr>
    </template>
  </table>
</template>

Correct Table Code:

<template>
  <table>
    <tr repeat.for="customer of customers">
      <td>${customer.fullName}</td>
    </tr>
  </table>
</template>

But obviously, the “correct table code” provided in the documentation examples does not suffice for the issue at hand, which requires multiple table rows per collection item.

The solutions provided by @elitastic and @tristanh seem to be working fine, however. But my Visual Studio 2019 environment does complain about the fact that “element ‘tr’ cannot be nested inside element ‘template’”. However, these issues are raised as warnings instead of errors. So I suspected that it is not valid HTML indeed. A quick glance on the Technical Summary section in the documentation of the tr element on the Mozilla Developer Network confirmed this. So it works, but theoretically it seems to be invalid.

Adding or omitting the containerless attribute does not seem to have any effect here (neither functional nor regarding the warnings in VS2019).

So I am still quite curious about possible alternative solutions that do not involve nesting tr elements in a template element.