Question 243376 in Html Question posted in
Some basic documentation can be found here.

Html – why is CSS font-weight ignored for a table entry?

I have a table in an HTML modal where the text entries in the table were not inheriting the CSS font settings for the modal as a whole. So I created a class with these same font settings and applied it to each td entry. Changing the font size in the class changed the table text, but changing the font-weight in the class had no effect on the text. If I put the font weight in an HTML style, then the text changed. Clearly I do not understand what is going on…

the CSS:

.manualResults {
    font-family: bahnschrift, sans-serif;
    font-size: 110%;
    font-weight: 450;
    color: #4C6A94;
}

Here are two entries from the table. The first one has the font weight I want. The second entry text has a much heavier font weight and I can’t figure out what is controlling it. I have not applied any font styling in either the table tag or the tr tag (or to either in my CSS).

<td id="manualSlope" class="manualResults" style="border: 0; background-color: #FEFEFE; width: 200px; font-weight: 450">
    Slope = 12.34
</td>
<td id="manualIntercept" class="manualResults" style="border: 0; background-color: #FEFEFE; width: 200px">
    Intercept = 6.78
</td>
Tags:

2

Answers


  1. 0

    This sounds like a specificity issue. To confirm it, check if this gives you what you want:

    .manualResults {
    font-family: bahnschrift, sans-serif;
    font-size: 110%;
    font-weight: 450 !important;
    color: #4C6A94;
}

    If the addition of !important made it work, then you have a specificity issue. Check if any other rule more specific than .manualResults is applying font-weight.

    Find more details on specificity here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    Login or Signup to reply.
  2. 0

    just complete Html table tags.

    same css

    .manualResults {
font-family: bahnschrift, sans-serif;
font-size: 110%;
font-weight: 450;
color: #4C6A94;

    }

    Html

    <table>
    <tr>
      <td  id="manualSlope" class="manualResults" style="border: 0; background-color: #FEFEFE; width: 200px; font-weight: 450">
         Slope = 12.34
      </td>
    </tr>
    <tr>
      <td id="manualIntercept" class="manualResults" style="border: 0; background-color: #FEFEFE; width: 200px">
        Intercept = 6.78
      </td>
    </tr>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search