CODEWITHSUNDEEP
htmlcssgoogle-chrome
Chewie The Chorkie
Chewie The Chorkie

Reputation: 5234

Font weight in table header not working in Chrome

In Safari and Firefox the font is bold, but it's not in Chrome. What is going on here? Tried emptying cache.

Safari and Firefox Safari and Firefox

Chrome Chrome

HTML:

<table style="width:100%;">
    <tr>
        <th>Project</th><th>Needed</th><th>Created</th>
    </tr>
    <tr>
        <td>Test project 4</td><td>2020-04-15</td><td>2020-02-21 17:22:13</td>
        <td>Test project 3</td><td>2020-03-19</td><td>2020-02-21 17:20:12</td>
        <td>Test project</td><td>2020-02-26</td><td>2020-02-21 14:51:26</td>
        <td>Test project 2</td><td>2020-02-29</td><td>2020-02-21 14:51:26</td>
    </tr>

</table>

CSS

table, td {
  border: 2px solid black;
  border-collapse: collapse;
  font-weight: light;
  text-align: center;
}

th {
    font-weight: bold;
}

Upvotes: 1

Views: 2354

Answers (2)

bron
bron

Reputation: 1548

!important is not best practice here because this has the highest level of priority. Use a more defining selector to target the <th>, for example

table th {
  font-weight: bold;
}

or

table tr th {
  font-weight: bold;
}

Upvotes: 3

Manas Khandelwal
Manas Khandelwal

Reputation: 3921

It is working. Add !important to the style.

See on Codepen: https://codepen.io/manaskhandelwal1/pen/yLNgpyZ

HTML

<table style="width:100%;">
        <tr>
            <th>Project</th>
            <th>Needed</th>
            <th>Created</th>
        </tr>
        <tr>
            <td>Test project 1</td>
            <td>2020-02-29</td>
            <td>2020-02-21 14:51:26</td>
        </tr>

        <tr>
            <td>Test project 2</td>
            <td>2020-02-29</td>
            <td>2020-02-21 14:51:26</td>
        </tr>

        <tr>
            <td>Test project 3</td>
            <td>2020-03-19</td>
            <td>2020-02-21 17:20:12</td>
        </tr>

        <tr>
            <td>Test project 4</td>
            <td>2020-04-15</td>
            <td>2020-02-21 17:22:13</td>
        </tr>
</table>

CSS

table,
td {
     border: 2px solid black;
     border-collapse: collapse;
     text-align: center;
}

th {
     font-weight: 100 !important;
     color: rgb(236, 28, 28);
}

Upvotes: 1

Related Questions