Html table not display properly while too many or table text is too long in flutter

Question

I'm trying to display an HTML table in my app but arise an overflow issue. I'm using flutter_html dependence.

This is my HTML table code

<p>Destruction of the<strong> ciliary ganglion</strong> interrupts <strong>postganglionic parasympathetic fibers</strong>, which innervate the sphincter pupillae and ciliaris; this results in-</p><ul><li><strong>loss of the direct pupillary reflex, </strong></li><li><strong>mydriasis, and </strong></li><li><strong>loss of accommodation.</strong></li></ul><p><strong>TREASURE</strong></p><table><tbody><tr><td><p><strong>Ganglion </strong></p></td><td><p><strong>Topographically Related To </strong></p></td><td><p><strong>Functionally Related To </strong></p></td><td><p><strong>Supplies </strong></p></td></tr><tr><td><p><strong>Otic</strong></p></td><td><p>Mandibular nerve&nbsp;</p></td><td><p>Glossopharyngeal nerve&nbsp;</p></td><td><p>Parotid gland</p></td></tr><tr><td><p><strong>Pterygopalatine</strong></p></td><td><p>Maxillary nerve&nbsp;</p></td><td><p>Greater petrosal nerve&nbsp;</p></td><td><p>Lacrimal, nasal, palatine, pharyngeal glands</p></td></tr><tr><td><p><strong>Submandibular</strong></p></td><td><p>Lingual nerve</p></td><td><p>Chorda tympani nerve</p></td><td><p>Submandibular and sublingual glands</p></td></tr><tr><td><p><strong>Ciliary</strong></p></td><td><p>Nasociliary nerve</p></td><td><p>Oculomotor nerve</p></td><td><p>Ciliaris</p><p>Sphincter and dilator pupillae</p></td></tr></tbody></table>

This is my flutter code

Html(
    data: htmlText,
    style: {
        "table": Style(),
        // some other granular customizations are also possible
        "tr": Style(
        border:
          Border(bottom: BorderSide(color: Colors.grey)),
        ),
        "th": Style(
        padding: EdgeInsets.all(6),
        backgroundColor: Colors.grey,
        ),
        "td": Style(
        padding: EdgeInsets.all(2),
        alignment: Alignment.topLeft,
        ),
    }
)

Answer 1

try Add more this field to make table scrollable

customRender: {
    "table": (context, child) {
        return SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: (context.tree as TableLayoutElement)
                            .toWidget(context),
        );
    }
}

Answer 2

<p>Destruction of the<strong> ciliary ganglion</strong> interrupts <strong>postganglionic parasympathetic fibers</strong>, which innervate the sphincter pupillae and ciliaris; this results in-</p><ul><li><strong>loss of the direct pupillary reflex, </strong></li><li><strong>mydriasis, and </strong></li><li><strong>loss of accommodation.</strong></li></ul><p><strong>TREASURE</strong></p><table><colgroup><col width="25%" /><col width="25%" /><col width="25%" /><col width="25%" /></colgroup><tbody><tr><td><p><strong>Ganglion </strong></p></td><td><p><strong>Topographically Related To </strong></p></td><td><p><strong>Functionally Related To </strong></p></td><td><p><strong>Supplies </strong></p></td></tr><tr><td><p><strong>Otic</strong></p></td><td><p>Mandibular nerve&nbsp;</p></td><td><p>Glossopharyngeal nerve&nbsp;</p></td><td><p>Parotid gland</p></td></tr><tr><td><p><strong>Pterygopalatine</strong></p></td><td><p>Maxillary nerve&nbsp;</p></td><td><p>Greater petrosal nerve&nbsp;</p></td><td><p>Lacrimal, nasal, palatine, pharyngeal glands</p></td></tr><tr><td><p><strong>Submandibular</strong></p></td><td><p>Lingual nerve</p></td><td><p>Chorda tympani nerve</p></td><td><p>Submandibular and sublingual glands</p></td></tr><tr><td><p><strong>Ciliary</strong></p></td><td><p>Nasociliary nerve</p></td><td><p>Oculomotor nerve</p></td><td><p>Ciliaris</p><p>Sphincter and dilator pupillae</p></td></tr></tbody></table>

Add tag in tag. Inside add tag. have width attribute. so give all tag give equal width.

For example I have four column so I give all tag width=25%