[BUG]Table render error with nested div elements

[Maclaon]

Describe the bug:

Table with nested div elements does not show the correct content!

HTML to reproduce the issue

<table>
    <tbody><tr class="def_row df_div1">
            <td>
                <div class="def_fl">
                    <div class="de_li1 de_li3">
                        <div class="se_d b_primtxt">1.</div>
                        <div class="df_cr_w">[British History]Same as the Great R-</div>
                    </div>
                    <div class="de_li1 de_li3">
                        <div class="se_d b_primtxt">2.</div>
                        <div class="df_cr_w">[American History]Same as the Civil War</div>
                    </div>
                    <div class="de_li1 de_li3">
                        <div class="se_d b_primtxt">3.</div>
                        <div class="df_cr_w">an attempt to remove a government or leader by force</div>
                    </div>
                    <div class="de_li1 de_li3">
                        <div class="se_d b_primtxt">4.</div>
                        <div class="df_cr_w">a refusal to obey your leader, especially in politics; opposition to someone in authority or to accepted ways of doing things</div>
                    </div>
                    <div class="gl_none" id="id_clps_homo0">
                        <div class="de_li1 de_li3">
                            <div class="se_d b_primtxt">1.</div>
                            <div class="df_cr_w">[British History]Same as the Great R-</div>
                        </div>
                        <div class="de_li1 de_li3">
                            <div class="se_d b_primtxt">2.</div>
                            <div class="df_cr_w">[American History]Same as the Civil War</div>
                        </div>
                        <div class="de_li1 de_li3">
                            <div class="se_d b_primtxt">3.</div>
                            <div class="df_cr_w">an attempt to remove a government or leader by force</div>
                        </div>
                        <div class="de_li1 de_li3">
                            <div class="se_d b_primtxt">4.</div>
                            <div class="df_cr_w">a refusal to obey your leader, especially in politics; opposition to someone in authority or to accepted ways of doing things</div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Html widget configuration

Html(
        data: data,
        shrinkWrap: true,
        customRenders: {
          tableMatcher(): tableRender(),
        },
        style: style
)

Expected behavior

Show completely table content

Screenshots

Correct content Screenshots

Tips

html content is not corresponded with the screenshots!

[fabianotavallini]

@Maclaon you can take a look to my workaround solution here

[Maclaon]

here

@Maclaon you can take a look to my workaround solution here

Thanks! i am using your customTableRender code in my, but the content show nothing！

when i add

style: {
  '*': Style(display: Display.inline),
}

the content can render, but not the right

and the log shows:

======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderLayoutGrid overflowed by 171 pixels on the right.

The relevant error-causing widget was: 

The edge of the RenderLayoutGrid that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderLayoutGrid.

This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the RenderLayoutGrid, or using a scrollable container, like a ListView.

The specific RenderLayoutGrid in question is: RenderLayoutGrid#0e74a relayoutBoundary=up17
...  parentData: offset=Offset(0.0, 0.0) (can use size)
...  constraints: BoxConstraints(w=0.0, 0.0<=h<=Infinity)
...  size: Size(0.0, 267.0)

when i add

style: {
  'table > tr > td > div': Style(display: Display.inline),
}

the screenshot is:

and the log is:

A RenderLayoutGrid overflowed by 64 pixels on the right.

The relevant error-causing widget was: 

The edge of the RenderLayoutGrid that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderLayoutGrid.

This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the RenderLayoutGrid, or using a scrollable container, like a ListView.