Span inside td does not override td style

Question

I have a span tag inside a td. The td has a class with CSS to set the text-decoration to underline, while the span sets the text-decoration to none. I expect the text inside the span to not be underlined, but for some reason it is. Why?

.u {
    text-decoration: underline;
}

.no-u {
    text-decoration: none !important;
}

<table>
    <tr>
        <td class="u">
            <span class="no-u" style="text-decoration: none !important;">My Text</span>
        </td>
    </tr>
</table>

The span doesn't have an underline; the table cell just still has the underline. In other words, the underline is being applied to the cell, not the span, so your rule on the span has no noticeable effect. — j08691, Aug 28 '13 at 16:27
Accoeding to @j08691 comment, just try to set `text-decoration: overline;` on the span, you'll see *underlne* and *overline* both together: http://jsfiddle.net/hashem/mfV5V/3/ — Hashem Qolami, Aug 28 '13 at 16:38
You may find useful this topic: http://stackoverflow.com/questions/7113520/text-decorationnone-doesnt-remove-text-decoration — Miguel G. Flores, Aug 28 '13 at 16:39

score 7 · Accepted Answer · answered Aug 28 '13 at 16:40

7

Cannot remove the underlined style for descendants.

http://www.w3.org/TR/CSS21/text.html#lining-striking-props

The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.

answered Aug 28 '13 at 16:40

kcsoft

2,917
19
14

Marc Audet · Answer 2 · 2013-08-28T17:08:41.190

According to the CSS2 spec, http://www.w3.org/TR/CSS21/text.html#lining-striking-props:

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.

This means that that any text and any inline element like <b>, <em> and <span> are all wrapped in an anonymous inline box on which the text decoration is applied.

Furthermore, in the case of a child inline-element, you can apply another text decoration which allows you to have both underline and overline appearing on a span of text. In this case, the underline in painted on one anonymous inline box and the overline is painted on a second (nested) anonymous inline box.

In this example, the td element acts as the block container.

However, this does not apply to inline-blocks.

See the demo at: http://jsfiddle.net/audetwebdesign/MSUHx/

Span inside td does not override td style

2 Answers2

Linked