I want to display some html from an email I sent.
However, the email html uses a table element for it's formatting (which is odd, I know). Tables in retool have a standard formatting, which I can disable with this CSS:
table, tbody, tr, td {
all: unset !important;
}
However, now the text is overflowing, and I cannot change the styling because I already unset all the properties.
The ideal solution would just be to select all <p> tags from the html, but I cannot seem to use query selectors inside the JS transformers. Is there a way I can display this email properly?
Here's a sample html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" style="display:none">
<!-- p {margin-top:0; margin-bottom:0} -->
</style>
</head>
<body dir="ltr">
<table id="table_2" style="background-color:rgb(255,255,255); width:100%; box-sizing:border-box; border-collapse:collapse; border-spacing:0px">
<tbody>
<tr>
<td style="width:1163px; height:1183px">
<table id="table_1" align="left" style="width:100%; table-layout:fixed; box-sizing:border-box; border-collapse:collapse; border-spacing:0px">
<tbody>
<tr>
<td style="width:1161px; height:1181px; background-color:rgb(255,255,255); vertical-align:top">
<table align="center" style="width:100%; table-layout:fixed; box-sizing:border-box; border-collapse:collapse; border-spacing:0px">
<tbody>
<tr>
<td style="width:1159px; height:1179px; padding-top:20px">
<table style="width:100%; box-sizing:border-box; border-collapse:collapse; border-spacing:0px">
<tbody>
<tr>
<th style="width:100%; height:1158px; text-align:left; vertical-align:top">
<table style="text-align:left; width:100%; table-layout:fixed; box-sizing:border-box; border-collapse:collapse; border-spacing:0px">
<tbody>
<tr>
<td style="width:1155px; height:1156px; text-align:left; vertical-align:top">
<table id="table_0" style="text-align:left; width:100%; box-sizing:border-box; border-collapse:collapse; border-spacing:0px">
<tbody>
<tr>
<td align="left" style="width:1153px; height:1154px">
<table align="left" style="width:100%; table-layout:fixed; box-sizing:border-box; border-collapse:collapse; border-spacing:0px">
<tbody>
<tr>
<td style="width:1151px; height:1152px; vertical-align:top">
<table style="width:100%; box-sizing:border-box; border-collapse:collapse; border-spacing:0px">
<tbody>
<tr>
<td align="left" style="width:1149px; height:1150px">
<table style="width:100%; table-layout:fixed; box-sizing:border-box; border-collapse:collapse; border-spacing:0px">
<tbody>
<tr>
<td align="left" style="width:1147px; height:1148px; line-height:1.5; padding-top:15px; vertical-align:top; word-break:break-word; color:rgb(59,63,68)">
<p style="line-height:1.5; margin:0px"><span style="font-family:"Source Sans Pro",Arial; font-size:16px; color:rgb(0,0,0); font-weight:300">This is my email<br></span></p>
<p style="line-height:1.5; margin:0px"><span style="font-family:"Source Sans Pro",Arial; font-size:16px; color:rgb(0,0,0); font-weight:300">In a land far beyond the crimson horizon, where the sea sang songs of ancient tales and the wind whispered the secrets of the universe, there existed a realm of untold wonders. The mighty warriors of Sanguine Peak protect this realm, their swords glistening under the ever-watchful sapphire moon. The story begins with Ethelred, a wise and valorous warrior. He was as fierce as he was kind, his heart was as vast as the open sea and his courage as towering as the highest peaks.
Ethelred embarked on a journey, his pursuit for peace leading him across valleys lit by enchanted lilies and through lush green woods where ebon-eyed owls sung lullabies. Against a backdrop of resplendent sunsets, fields gleaming golden in the day's last light, and in the throbbing heart of dazzling star-studded nights, his journey was a spectacle of nature's grandeur.
Coming from the land of Prism Valley, known for its radiant rainbow-colored blossom, was a maiden as beautiful as the dawn itself: Liana. Her eyes carried the hue of the boundless sky, and her laughter echoed the sunlit glades. Liana, with her courage and kindness, had changed many lives, turning sorrowful faces into delightful smiles, transforming the grayest of days into beautiful rainbows.
One serene afternoon, as Ethelred and Liana sat under the mystic sapphire tree, they spoke of tales from their homelands, of the lands they journeyed, of the sights they had witnessed and the music of places they had been. Each anecdote carried the whisper of the wind, the melody of the waves, the rustle of the leaves and the harmony of the universe.
Underneath the overhanging branches of knowledge and the soft, comforting light of the moon, new stories emerged, each story a different color of life. Amid the tales, the laughs, and the shared understanding, their hearts began to communicate in a language only they understood. And it is in this quiet symphony of souls, that they found sapphire-colored love.
This tale of winding paths, long-lived nights, captivating vistas, and shared dreams is but a page in the grand book of life, echoing the rhythm of countless hearts across time and distance. Life, with its myriad hues, continues its waltz, spinning tales of joy, courage, adventure, and love. True, all tales are not filled with happiness, but even within shadows, there are strokes of light. This is the beautiful paradox of life, the chiaroscuro of existence.</span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>