[BUG] Table overflows no matter what

[InstantlyMoist]

Describe the bug: When using a table widget with the flutter_html_table package, it overflows. This is with or without sized boxes or SingleChildScrollView. Both in an attempt to catch the enormous size.

HTML to reproduce the issue:

<table border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2" valign="top">
<p>redacted</p>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<ul>
<li>redacted</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<ul>
<li>redacted</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<ul>
<li>redacted</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<p>redacted</p>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<p>redacted</p>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<p>redacted</p>
</td>
</tr>
<tr>
<td valign="top">
<p>redacted</p>
</td>
<td valign="top">
<p>redacted</p>
</td>
</tr>
<tr>
<td valign="top">
<p>redacted</p>
</td>
<td valign="top">
<p>redacted</p>
</td>
</tr>
<tr>
<td valign="top">
<p>redacted</p>
</td>
<td valign="top">
<p>redacted</p>
</td>
</tr>
<tr>
<td valign="top">
<p>redacted</p>
</td>
<td valign="top">
<p>redacted</p>
</td>
</tr>
</tbody>
</table>

Html widget configuration:

  final String data;

  final Map<String, Style> htmlStyles = {
    '*': Style(
      fontFamily: 'AvenirLTStd',
      fontSize: FontSize.large,
      lineHeight: LineHeight.em(
        1.5,
      ),
    ),
    'tr': Style(
      padding: HtmlPaddings.all(
        2.0,
      ),
      border: Border(
        bottom: BorderSide(
          color: Colors.grey,
        ),
        left: BorderSide(
          color: Colors.grey,
        ),
        top: BorderSide(
          color: Colors.grey,
        ),
        right: BorderSide(
          color: Colors.grey,
        ),
      ),
    ),
    'td': Style(
      padding: HtmlPaddings.all(
        2.0,
      ),
      display: Display.inline,
    ),
  };

  HtmlModuleWidget({
    Key? key,
    required this.data,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Html(
      data: data,
      style: htmlStyles,
      onLinkTap: _onHtmlLinkTap,
      extensions: [
        TagWrapExtension(
            tagsToWrap: {'table'},
            builder: (child) {
              final ScrollController _scrollController = ScrollController();
              return Scrollbar(
                controller: _scrollController,
                thumbVisibility: true,
                child: SingleChildScrollView(
                  controller: _scrollController,
                  scrollDirection: Axis.horizontal,
                  child: child,
                ),
              );
            }),
        const TableHtmlExtension(),
      ],
      // customImageRenders: customImageRenders,
    );
  }

  void _onHtmlLinkTap(
      String? url, Map<String, String> attributes, dom.Element? element) async {
    if (url == null) return;
    Uri uri = Uri.parse(url);
    if (await canLaunchUrl(uri)) {
      await launchUrl(uri, mode: LaunchMode.externalApplication);
    }
  }

Device details and Flutter/Dart/flutter_html versions: flutter_html: Tried both the latest beta, and the fix branch

Flutter 3.16.9 • channel stable • https://github.com/flutter/flutter.git Framework • revision 41456452f2 (3 weeks ago) • 2024-01-25 10:06:23 -0800 Engine • revision f40e976bed Tools • Dart 3.2.6 • DevTools 2.28.5

[InstantlyMoist]

Anyone looking for a temporary workaround, you could use this piece of code to 'fix' your html string. It's based on the 'html' library and un-nests

tags and

/
elements. Not the most ideal solution but it works.

static String fixHtml(String html) {
    var inputHtml = parseFragment(html);

    // Select all table elements containing a <p> tag, and unwrap the <p> tag from the table elements
    inputHtml.querySelectorAll("th p, td p").forEach(
          (element) => element.replaceWith(
            replaceElementWithTag(element, "span"),
          ),
        );

    // Push li one layer deeper
    inputHtml.querySelectorAll(
        "th > ul > li,"
        "th > ol > li,"
        "td > ul > li,"
        "td > ol > li").forEach(
          (element) => element.replaceWith(
            replaceElementWithTag(element, "span"),
          ),
        );

    inputHtml.querySelectorAll(
        "th > ul,"
        "th > ol,"
        "td > ul,"
        "td > ol").forEach(
          (element) => element.replaceWith(
            replaceElementWithTag(element, "span"),
          ),
        );
    return inputHtml.outerHtml;
  }

  static Element replaceElementWithTag(Element element, String replacement) {
    return Element.html(
      "<$replacement>${element.innerHtml}</$replacement>",
    );
  }