CODEWITHSUNDEEP
cssfontshtml-table
Rolf
Rolf

Reputation: 945

Why are THs bolder than TDs and how to avoid it?

Edit June 14, 2015 - from this question, I learned that "bolder" and "lighter" are relative. The source that I referenced before said that "bolder" were an absolute measure and means "extra bold". I changed that source now :) (selfhtml.org wiki). Thanks all for your help.

Please consider the following CSS:

table.a tr { font: bold 12pt Arial; }
table.b td,table.b th { font: bold 12pt Arial; }

and HTML (I compressed it a bit, it's also here: http://jsfiddle.net/b9uwnx31/

<body>
  <h2>Boldness Check</h2>
  <table class="a">
    <tr>
      <th>TH Column 1</th><td>TD Column 2</td><th>TH Column 3</th>
    </tr>
  </table>  
  <table class="b">
    <tr>
      <th>TH Column 1</th><td>TD Column 2</td><th>TH Column 3</th>
    </tr>
  </table>  
</body>

Please look at the fiddle with Internet Explorer (10 or 11) and then with Chrome for Windows. Be careful that IE runs in standard mode.

I don't understand the different behavior of TH in Tables A and B. When I style the TR with font-weight:bold, the TH is rendered bolder. When I style the TH directly, TD and TH are rendered with the same weight.

This happens in Internet Explorer 9 and higher, it happens in Android Browser and Chrome for Android, but it does not happen in Chrome for Windows (those are the browsers I could check). Is this some kind of quirk? Or is it a feature that I don't know how to control?

Upvotes: 2

Views: 397

Answers (3)

Marc Audet
Marc Audet

Reputation: 46785

I checked your code snippet both in Firefox and Internet Explorer (latest versions) and indeed, there is a difference in how the boldness of the th elements is rendered by the two browsers.

The best explanation that I can offer is that the CSS specification does not say anything about how the font-weight of the th elements is to be computed, so how this is to be done is left up to the browser.

In both browsers, if you specify the font-weight on the td and th elements explicitly as in your Table B, then you get a consistent font-weight. In Firefox, the value is set to bold and in Internet Explorer, the bold value is mapped to the font-weight scale value 700 for the Arial font.

In the case of Table A, the font-weight is applied to the parent element, the tr that contains the table cells. In the case of Firefox, the CSS engine inherits the value from tr, that is bold, and you get the consistent font-weight.

However, for Internet Explorer, font weights are computed differently. First, the IE CSS engine gets the inherited value, bold, and applies it to the td elements as a font-weight of 700. For the th element, the IE CSS engine appears to apply the equivalent of bolder instead of bold, and this leads to a computed font-weight of 900, which makes the th elements look bolder.

What you are seeing here is a cross-browser difference due to how the software design engineers decided to interpret the CSS specification in a case where there were no explicit guidelines as to what to do.

I also noticed that if you change the font-family to something else, you may not see the problem, since browsers read font meta data to decide how to map the font-weight scale to the font-weights indicated in the font meta data. (See http://dev.w3.org/csswg/css2/fonts.html#font-boldness for some indication of what the CSS engines may be doing in the background.)

As for a fix, well you more or less have it already. Specify the font-weight explicitly by selecting td and th elements directly.

table.a tr {
    font: bold 12pt Arial;
}
table.b td, table.b th {
    font: bold 12pt Arial;
}
 <h2>Boldness Check</h2>

<table class="a">
    <tr>
        <th>TH Column 1</th>
        <td>TD Column 2</td>
        <th>TH Column 3</th>
    </tr>
</table>
<table class="b">
    <tr>
        <th>TH Column 1</th>
        <td>TD Column 2</td>
        <th>TH Column 3</th>
    </tr>
</table>

Upvotes: 1

Mike &#39;Pomax&#39; Kamermans
Mike &#39;Pomax&#39; Kamermans

Reputation: 53598

this looks perfectly normal to me. In table A, you don't say anything about how <th> or <td> should be styled, so default styling is used which means browsers can do whatever they want: styling a row does nothing to override column defaults.

With table B you explicitly say what should happen with the <th> and <td> styling, and so they look the same. In the latest IE:

enter image description here

Also note that, strictly speaking, border-collapse has nothing to do with this problem, as some answers are suggesting. It "solves" the problem by changing the styling semantics of the <tr> element. Instead, this really is purely a matter of "if you want to style elements the same, specify CSS for those elements, not just their parents"; if you have nested divs, you won't notice this being a problem, but if you have nested different elements, you may run into this, and your example is a perfect demonstrator of a practical case where this matters.

Upvotes: 1

Jeff Clarke
Jeff Clarke

Reputation: 1397

You are trying to style the <TR> tag. In order to do that consistently across browsers, you need to set the table's border-collapse property to collapse.

table {
  border-collapse: collapse;
}

Now your rule for <TR> will apply.

Note, that <TH> tags are styled bold by default, which is why you were getting <TH> as bold, but <TD> as normal when you tried to style the <TR>.

Upvotes: 0

Related Questions