[BUG] Table rows not shown correctly

[emaborsa]

Flutter doctor

Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 3.7.10, on Microsoft Windows [Version 10.0.19044.3448], locale de-DE) [X] Windows Version (Unable to confirm if installed Windows version is 10 or greater) Checking Android licenses is taking an unexpectedly long time...[√] Android toolchain - develop for Android devices (Android SDK version 33.0.1) [√] Chrome - develop for the web [√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.7.4) [√] Android Studio (version 2022.1) [√] VS Code, 64-bit edition (version 1.82.2) [√] Connected device (5 available) [√] HTTP Host Availability

! Doctor found issues in 1 category.

_flutterhtml version 2.2.1

Problem: Tables are rendered with padding/margin?

Expected output

HTML sample

<style>
  td p {
    background-color: orange;
  }
  td {
    border-bottom: 1px #000000 solid;
  }

</style>
<table cellpadding="0" cellspacing="0" style="border-collapse: collapse">
  <tbody>
    <tr>
      <td>
        <b>
          <strong>Modelle</strong>
        </b>
      </td>
      <td>
        <b>
          <strong>Rabatt</strong>
        </b>
      </td>
    </tr>
    <tr>
      <td>
        <p>
          <span>Cupra Leon, Cupra leon Sportstourer </span>
        </p>
      </td>
      <td>
        <p>
          <span>15 % </span>
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p>
          <span>Cupra Ateca</span>
        </p>
      </td>
      <td>
        <p>
          <span>18 % </span>
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p>
          <span>Cupra Formentor</span>
        </p>
      </td>
      <td>
        <p>
          <span>14 %</span>
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p>
          <span>Cupra Formentor E-Hybrid</span>
        </p>
      </td>
      <td>
        <p>
          <span>13 %</span>
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p>
          <span>Cupra born</span>
        </p>
      </td>
      <td>
        <p>
          <span>  8 % </span>
        </p>
      </td>
    </tr>
  </tbody>
</table>

[emaborsa]

For test purpuses I added a customRender as followings:

customRender: {
  "td": (context, parsedChild) {
    return Container(
      child: Text("OK"),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: Colors.black,
            width: 1,
            style: BorderStyle.solid))));
  }
},

The output:

Where do the spaces come from?

[emaborsa]

If I add a customRender for tr, it is completely ignored.

[erickok]

It's coming from the p tags. Seems like a bug (regression).

[emaborsa]

I tried to find a workaround, removing the styles:

customRender: {
  "td": (context, parsedChild) {
    if (parsedChild is ContainerSpan) {
      return ContainerSpan(
        newContext: context,
        style: Style(),
        shrinkWrap: parsedChild.shrinkWrap,
        children: parsedChild.children);
    }

    return parsedChild;
  },
  "p": (context, parsedChild) {
    if (parsedChild is ContainerSpan) {
      return ContainerSpan(
        newContext: context,
        style: Style(backgroundColor: Colors.orange),
        shrinkWrap: parsedChild.shrinkWrap,
        children: parsedChild.children);
    }

    return parsedChild;
  },
  "span": (context, parsedChild) {
    if (parsedChild is ContainerSpan) {
      return ContainerSpan(
        newContext: context,
        style: Style(backgroundColor: Colors.yellow),
        shrinkWrap: parsedChild.shrinkWrap,
        children: parsedChild.children);
    }

    return parsedChild;
  }
},

Don't understand where the spaces come from: