How to let table takes up the full width?

[ym-b2]

I am using flutter_html: ^3.0.0-beta.2 and flutter_html_table: ^3.0.0-beta.2

the minimum code of my Html widget is as follows:

            Html(
                      data: snapshot.data!,
                      style: {
                        "span.highlight": Style(
                            color: Constants.primary_color,
                            height: Height(1.5)),
                        "table": Style(
                            fontSize: FontSize(11),
                            color: Color(0xff898989),
                            border: Border.all(color: Constants.primary_color),
                            margin: Margins(
                                top: Margin(30))),
                        "tr": Style(
                          fontSize: FontSize(11),
                          color: Color(0xff898989),
                          border: Border.all(color: Constants.primary_color),
                        ),
                        "th": Style(
                          fontSize: FontSize(11),
                          color: Color(0xff898989),
                          padding: HtmlPaddings.all(6),
                          border: Border.all(color: Constants.primary_color),
                        ),
                        "td": Style(
                            fontSize: FontSize(11),
                            color: Color(0xff898989),
                            padding: HtmlPaddings.all(6),
                            alignment: Alignment.center,
                            border: Border.all(color: Constants.primary_color)),
                      },
                      extensions: [
                        TableHtmlExtension(),
                      ],
                    )

The outcome I got was:

my original html code is:

<table>
    <thead>
    <tr>
        <th colspan="2">Minimum Savings Rp 5,000.000</th>
    </tr>
    <tr>
        <th>Member</th>
        <th>Gram</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>0.5</td>
    </tr>
    <tr>
        <td>2</td>
        <td>1</td>
    </tr>
    <tr>
        <td>3</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td>5</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>3</td>
    </tr>
    <tr>
        <td>7</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>8</td>
        <td>4</td>
    </tr>
    <tr>
        <td>9</td>
        <td>4.5</td>
    </tr>
    <tr>
        <td>10</td>
        <td>5</td>
    </tr>
    </tbody>
</table>

Which part of the code should I change to make the table takes up the entire width?

[c-louis]

Hello @ym-b2,

Just ran in the same problem after updating to the beta version, after some testing I think something is definitely broken somewhere and I didn't manage to find a pretty solution.

Hopes this helps you with your question while the maintainers are busy:

Here are two possible solution you could consider:

Doing like this guy which is a solution I tried and definitely disliked as it also meant changing the HTML my app is getting.

The second solution I found was to manually set the width of the table, this is kinda dirty but at least we still use this package that overall seems to work while in beta.

This is my code for example:

Html(
  data: pi.infoArea,
  style: {
    "table": Style(width: Width(MediaQuery.of(context).size.width - 50))
  },
  extensions: [
    const TableHtmlExtension(),
    ImageExtension(
      networkSchemas: {'data:image'},
      builder: (extensionContext) {
        final elem = extensionContext.styledElement!;
        final decodedImage = base64.decode(elem.attributes['src']!.split('base64,')[1].trim());
        return Image.memory(
          decodedImage,
          width: elem.attributes['width'] != null ? double.tryParse(elem.attributes['width']!) : 128,
        );
      }
    )
  ],
),

I feel that I'm going pretty dirty with that :

style: {
    "table": Style(width: Width(MediaQuery.of(context).size.width - 50))
  },

But still its adapting to Screen size thanks to MediaQuery... and I'm still removing my offset on sides using the -50 and my table is taking the full width

If you have multiple table you might want to consider using classes on your table.

Let's not forget we are using a beta version there and yeah there is broken features but the maintainers seems to do a pretty good job so far on bringing this new version.

[ym-b2]

Hello @ym-b2,

Just ran in the same problem after updating to the beta version, after some testing I think something is definitely broken somewhere and I didn't manage to find a pretty solution.

Hopes this helps you with your question while the maintainers are busy:

Here are two possible solution you could consider:

Doing like this guy which is a solution I tried and definitely disliked as it also meant changing the HTML my app is getting.

The second solution I found was to manually set the width of the table, this is kinda dirty but at least we still use this package that overall seems to work while in beta.

This is my code for example:

Html(
  data: pi.infoArea,
  style: {
    "table": Style(width: Width(MediaQuery.of(context).size.width - 50))
  },
  extensions: [
    const TableHtmlExtension(),
    ImageExtension(
      networkSchemas: {'data:image'},
      builder: (extensionContext) {
        final elem = extensionContext.styledElement!;
        final decodedImage = base64.decode(elem.attributes['src']!.split('base64,')[1].trim());
        return Image.memory(
          decodedImage,
          width: elem.attributes['width'] != null ? double.tryParse(elem.attributes['width']!) : 128,
        );
      }
    )
  ],
),

I feel that I'm going pretty dirty with that :

style: {
    "table": Style(width: Width(MediaQuery.of(context).size.width - 50))
  },

But still its adapting to Screen size thanks to MediaQuery... and I'm still removing my offset on sides using the -50 and my table is taking the full width

If you have multiple table you might want to consider using classes on your table.

Let's not forget we are using a beta version there and yeah there is broken features but the maintainers seems to do a pretty good job so far on bringing this new version.

Thanks for the suggestion, I am currently using a similar approach as yours too. Let's wait for future developer updates, hopefully there's a cleaner and more efficient resolution to this.

[emaborsa]

Hi @ym-b2, why did you close it? the solution mentioned is just a workaround, it would be helpful for others as well to have a clean way to solve this problem.

[emaborsa]

@c-louis for the table you could simply use:

"table": Style(
  width: double.infinity,
)

The problem are the tds.