Great suggestion! Unsure of the exact solution, but I do have a helpful workaround for you. Instead of using an underline with the span element, you can try the following:
Modify your code as shown below:
<tr>
<td>
<b><span style="text-decoration: underline 1px; font-size:15px;font-family:Arial,Helvetica Neue,Helvetica,sans-serif; color: #1C2A5B; text-decoration-skip-ink: none; display:inline-block">Estrogen-Alone Therapy</span></b>
</td>
</tr>
Instead, try this approach:
<tr>
<td>
<b><span style="border-bottom: 1px solid orange; padding-bottom:10px; font-size:15px;font-family:Arial,Helvetica Neue,Helvetica,sans-serif; color: #1C2A5B; text-decoration-skip-ink: none; display:inline-block">Estrogen-Alone Therapy</span></b>
</td>
</tr>
You also have the flexibility to adjust the spacing underneath the text. It's not necessarily a permanent fix, but it serves as a useful alternative. By replacing the underline with a border at the bottom and adding padding for spacing adjustment, you can achieve the desired look (before and after):
https://i.sstatic.net/RR85q.png
Please take note: If this issue pertained to an "A" tag, you could simply add
"display:inline-block;"
to achieve the same effect. In this case, I refrained from adding it as the span is already inline.
Keep coding joyfully!