Display html table in email using Python

Question

Basically, I am trying to display a html table in outlook email body. When i tried to get a preview of the table in here, it looked nice and fine (i.e. the columns are not squashed together). However, when I tried to display it in email, it always look like below.

How can I make the table columns wider and not squashed together like the image below ?

html table - df_wtd_flow

<p><table border="0" class="dataframe">\n<caption style = "background-color: #FFFFFF;font-family: Century Gothic;font-size: large;font-weight: bold;color: #305496;text-align: center;border-bottom: 2px solid #305496;padding: 0px 20px 0px 0px">Net Flow (Week-To-Date)</caption>\n  <thead>\n    <tr style="text-align: right;">\n      <th style = "background-color: #FFFFFF;font-family: Century Gothic, sans-serif;font-size: 12;color: #305496;text-align: left;border-bottom: 2px solid #305496;padding: 0px 20px 0px 0px;width: auto">Northbound / Southbound</th>\n      <th style = "background-color: #FFFFFF;font-family: Century Gothic, sans-serif;font-size: 12;color: #305496;text-align: left;border-bottom: 2px solid #305496;padding: 0px 20px 0px 0px;width: auto">Inflow / Outflow</th>\n      <th style = "background-color: #FFFFFF;font-family: Century Gothic, sans-serif;font-size: 12;color: #305496;text-align: left;border-bottom: 2px solid #305496;padding: 0px 20px 0px 0px;width: auto">Net Flow [Mln]</th>\n      <th style = "background-color: #FFFFFF;font-family: Century Gothic, sans-serif;font-size: 12;color: #305496;text-align: left;border-bottom: 2px solid #305496;padding: 0px 20px 0px 0px;width: auto">Net Flow [US$ Mln]</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td style = "background-color: #D9E1F2;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">Northbound - Shanghai-HK (RMB)</td>\n      <td style = "background-color: #D9E1F2;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">Outflow</td>\n      <td style = "background-color: #D9E1F2;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">-$5,551</td>\n      <td style = "background-color: #D9E1F2;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">-$861</td>\n    </tr>\n    <tr>\n      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">Northbound - Shenzhen-HK (RMB)</td>\n      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">Outflow</td>\n      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">-$1,681</td>\n      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">-$261</td>\n    </tr>\n    <tr>\n      <td style = "background-color: #D9E1F2;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">Northbound - Total (RMB)</td>\n      <td style = "background-color: #D9E1F2;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">Outflow</td>\n      <td style = "background-color: #D9E1F2;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">-$7,231</td>\n      <td style = "background-color: #D9E1F2;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">-$1,122</td>\n    </tr>\n    <tr>\n      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">Southbound - Shanghai-HK (HKD)</td>\n      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">Inflow</td>\n      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">$1,121</td>\n      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">$143</td>\n    </tr>\n    <tr>\n      <td style = "background-color: #D9E1F2;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">Southbound - Shenzhen-HK (HKD)</td>\n      <td style = "background-color: #D9E1F2;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">Inflow</td>\n      <td style = "background-color: #D9E1F2;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">$51</td>\n      <td style = "background-color: #D9E1F2;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">$7</td>\n    </tr>\n    <tr>\n      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">Southbound - Total (HKD)</td>\n      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">Inflow</td>\n      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">$1,173</td>\n      <td style = "background-color: white; color: black;font-family: Century Gothic, sans-serif;font-size: 12;text-align: left;padding: 0px 20px 0px 0px;width: auto">$149</td>\n    </tr>\n  </tbody>\n</table></p>

html = """{} """
outlook         = win32.Dispatch('outlook.application')
mail            = outlook.CreateItem(0)
mail.HTMLBody   = html.format(df_wtd_flow)

Answer 1

The issue seems to be the undefined table width. If you squeeze the online editor window enough, the same "squashing" happens here:

Instead try adding a fixed width for the table to achieve the desired "unsquashable" result:

<table border="0" class="dataframe" width=600>