[BUG]

[YoofiBP]

Describe the bug:
I am rendering a table but cannot seem to obtain full widths when using both percentages and pixels. I even tried wrapping the HTML widget in a full width container.

Below is what it looks like

HTML to reproduce the issue:

<table width="2000px">
 <tr>
  <td colspan="2" style="border:2px solid black">Some other text</td>
  <td style="border:2px solid black">Some text</td>
 </tr>
 <tr>
  <td style="border:2px solid black">Hello</td>
  <td style="border:2px solid black">Hello</td>
  <td style="border:2px solid black">Hello</td>
 </tr>
 <tr>
  <td style="border:2px solid black">Hello</td>
  <td style="border:2px solid black">Hello</td>
  <td style="border:2px solid black">Hello</td>
 </tr>
</table>

Html widget configuration:

Html(
        style: {
          "table": Style(width: 5000)
        },
        data: """<table width="2000px">
 <tr>
  <td colspan="2" style="border:2px solid black">Some other text</td>
  <td style="border:2px solid black">Some text</td>
 </tr>
 <tr>
  <td style="border:2px solid black">Hello</td>
  <td style="border:2px solid black">Hello</td>
  <td style="border:2px solid black">Hello</td>
 </tr>
 <tr>
  <td style="border:2px solid black">Hello</td>
  <td style="border:2px solid black">Hello</td>
  <td style="border:2px solid black">Hello</td>
 </tr>
</table>""",)

Expected behavior:

Screenshots:

Device details and Flutter/Dart/flutter_html versions:
Flutter version: 2.5.3
Dart version: 2.14.4
flutter_html: 2.2.1

Stacktrace/Logcat

Additional info:

A picture of a cute animal (not mandatory but encouraged)

[Sub6Resources]

Noted, thank you! We're working through a chunk of issues regarding table. Have you tried this in version 3.0.0-alpha.5?

[YoofiBP]

Noted, thank you! We're working through a chunk of issues regarding table. Have you tried this in version 3.0.0-alpha.5?

Yhup. Weirdly it does not render my table. Shows some general TABLE SECTION text

flutter_html: ^3.0.0-alpha.5

[erickok]

@YoofiBP you forgot to include the dependency on flutter_html_table

[YoofiBP]

flutter_html_table

Apologies:

flutter_html_table: ^3.0.0-alpha.3

[erickok]

Yes but you also need flutter_html_table, as per 3.0 the library is modularised.

[YoofiBP]

@erickok Yes I have flutter_html_table included and have implementation it as below:

Html(data: """<table width="2000px">
 <tr>
  <td colspan="2" style="border:2px solid black">Some other text</td>
  <td style="border:2px solid black">Some text</td>
 </tr>
 <tr>
  <td style="border:2px solid black">Hello</td>
  <td style="border:2px solid black">Hello</td>
  <td style="border:2px solid black">Hello</td>
 </tr>
 <tr>
  <td style="border:2px solid black">Hello</td>
  <td style="border:2px solid black">Hello</td>
  <td style="border:2px solid black">Hello</td>
 </tr>
</table>""",
    customRenders: {
      tableMatcher(): tableRender()
    },)

It still looks the same after including this

flutter_html_table: ^3.0.0-alpha.3

[Rafal-Okuniewski]

Hi I suppose I have the same problem.
I am using version: flutter_html_table: 3.0.0-alpha.3

When I try to recreate the table from html I get the text value: TABLE SECTION

Adding to the dependency: flutter_html_table
and setting:

 customRenders: {
   tableMatcher(): { tableRender(),
},

causes the table to appear but it does not display correctly to put it lightly

[Sub6Resources]

I was able to reproduce your error. There are currently a lot of open issues regarding tables, as they are quite difficult to properly implement in Flutter. This has been added to the queue and I'll take a closer look at it!