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

user_18056527 0
Viewed 118

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,
        ),
    }
)

Output image

dart-html flutter-html dart flutter
1 Answers

<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%

user_180565270
Related