I know this top has been discussed a lot and I don't really see any similar case from my search. Maybe I'm wrong. I feel like this is incredible so I'm wondering if anyone can shed me some light.
I've got below two tables one nest the other. One has set with underline and one hasn't. See the code below. From my understanding, even if the underline style on the outer table is effective (which should be because there's no text), it should display a line underneath the nested table (note that table has padding inside). But the line looks like being set on the nested table...
<table width="640" align="center" bgcolor="#000001">
<tr>
<td style="color:#ff0000; text-decoration:underline;">
<table width="100%">
<tr>
<td style="color:#ffffff; font-size:14px; text-decoration:none; padding:30px 0;" align="center">
<a href="https://google.com" style="color:#ffffff; text-decoration:none">Text here</td>
</tr>
</table>
</td>
</tr>
</table>The crazy thing is if you add a large font-size on the outer table. You'll get the below result.
<table width="640" align="center" bgcolor="#000001">
<tr>
<td style="color:#ff0000; text-decoration:underline; font-size: 100px;">
<table width="100%">
<tr>
<td style="color:#ffffff; font-size:14px; text-decoration:none; padding:30px 0;" align="center">
<a href="https://google.com" style="color:#ffffff; text-decoration:none">Text here</td>
</tr>
</table>
</td>
</tr>
</table>I had the code on CodePen if you think that's easier for you.
BTW, the ghost underline is RED in Firefox but WHITE in Chrome. That also confuses me, if you have any idea on that too. Please tell me.
Any idea?
Temani got the point. And those two links(1, 2) in the comments explain the issue well. I didn't realize it's not just wrong with underline but with the text-decoration itself.
It can be explained by a simple code like below. That the text-decoration will "spread" into any inline children if it's not floated, positioned, inline-block or inline-table.
<div style="color:#ff0000; text-decoration:underline;font-size: 100px; ">
<div>
<a href="https://google.com" style="color:#000000; text-decoration:none;"
>Text here</a
> aaa
</div>
</div>From the reference:
When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). But, in CSS 2.1, it is undefined whether the decoration propagates into block-level tables. For block containers that establish an inline formatting context, the decorations are propagated to an anonymous inline element that wraps all the in-flow inline-level children of the block container. For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
So for my case, I can set inline-block on the <a> tag or set inline-table on the nested <table>.