CODEWITHSUNDEEP
csshtmlcross-browser
Rick Hitchcock
Rick Hitchcock

Reputation: 35670

<li> <th> text-align inconsistency

In IE, Edge, and Safari, a <th> descendant of a <li> is center-justified.

In Chrome, Firefox, and Opera, it's left-justified.

According to W3C Rendering recommendations (italics mine):

User agents are expected to have a rule in their user agent stylesheet that matches th elements that have a parent node whose computed value for the 'text-align' property is its initial value, whose declaration block consists of just a single declaration that sets the 'text-align' property to the value 'center'.

The italicized section states that a <th> element should be centered if its parent's text-align property hasn't been changed.

That's not the case for <th> descendants of <li> in Chrome, Firefox, and Opera. Am I correct in assuming that they are ignoring W3C recommendations?

(The problem is easily overcome by using th {text-align: center;}, so I don't need a solution.)

Edit

I've received a couple of good explanations for the behavior, but the answers are unsatisfactory – through no fault of the posters.

I think the intent of the W3C is that <th> elements should be centered unless they include or inherit a different explicit text-align style. It doesn't make sense that <th> elements should be left-justified due to a convoluted cascading inheritance of implicit styles.

It seems to hinge on what W3C means by "its initial value" in the quote. The "initial value" of a <li>'s text-align property is match-parent, which is apparently different from text-align: initial.

Hopefully the W3C will clarify this in the future. In the meantime, th {text-align: center;} solves the problem.

Example:

th, td {
  border: 1px solid #ddd;
}
<ol>
  <li>
    <table>
      <tr>
        <th>This is a Lorem Ipsum<br>test</th>
        <th>Another header
      </tr>
      <tr>
        <td>ABCDEFG HIJKLMNOP QRSTUV WXYZ
        <td>More
      </tr>
    </table>
  </li>
</ol>

Upvotes: 3

Views: 316

Answers (2)

Oriol
Oriol

Reputation: 288050

No, they are not ignoring W3C. From the quote in your question,

a parent node whose computed value for the 'text-align' property is its initial value

But that's not the case. The initial value for text-align is start, which computes to start. But <li> elements are styled with text-align: match-parent, which computes to left since the <ol> has direction: ltr. Even though start behaves like left because the <li> also has direction: ltr, they are different values. That's why the th is not centered.

Note both start and match-parent are recent additions. Possibly the th becomes centered on browsers which don't support them yet.

If you use li { text-align: initial; } then th th is centered.

th, td {
  border: 1px solid #ddd;
}
li {
  text-align: initial;
}
<ol>
  <li>
    <table>
      <tr>
        <th>This is a Lorem Ipsum<br>test</th>
        <th>Another header
      </tr>
      <tr>
        <td>ABCDEFG HIJKLMNOP QRSTUV WXYZ
        <td>More
      </tr>
    </table>
  </li>
</ol>

Upvotes: 1

dippas
dippas

Reputation: 60553

your issue is that li is by default text-align: match-parent (at least on Firefox), which mean the li are text-align:left (if direction is ltr otherwise is text-align:right) so if you change li to text-align:initial the th will work as you expect

match-parent

Similar to inherit, but the values start and end are calculated according the parent's direction and are replaced by the adequate left or right value.

th,
td {
  border: 1px solid #ddd;
}
li {
  text-align: initial
}
<ol>
  <li>
    <table>
      <tr>
        <th>This is a Lorem Ipsum
          <br>test</th>
        <th>Another header
      </tr>
      <tr>
        <td>ABCDEFG HIJKLMNOP QRSTUV WXYZ
          <td>More
      </tr>
    </table>
  </li>
</ol>

Upvotes: 5

Related Questions