When it comes to centering a <th> element inside an <li>, different browsers have different approaches.
In Internet Explorer, Edge, and Safari, the <th> is center-justified. However, 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 W3C recommendation implies that a <th> should be centered by default unless there's a specific change made to the text-align property of its parent.
However, in actual practice, <th> elements inside <li> tags in Chrome, Firefox, and Opera do not follow this guideline. It seems like they might be deviating from W3C's suggestions.
(The issue can easily be fixed using th {text-align: center;}, so no solution is necessary.)
Edit
While there have been explanations for this behavior, they remain unsatisfactory – without any fault on the part of those providing answers.
It appears that the intention of the W3C is for <th> elements to be centered unless they specifically include or inherit a different explicit text-align style. Left-justifying <th> due to complex cascading inheritance of implicit styles doesn't seem logical.
The confusion seems to revolve around the definition of "its initial value" as mentioned in the quote. The "initial value" of a <li>'s text-align property is match-parent, which is evidently distinct from text-align: initial.
Hopefully, the W3C will provide clarification on this matter in the future. In the meantime, using th {text-align: center;} resolves the issue.
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>