Вес шрифта в заголовке таблицы не работает в Chrome

Question

В Safari и Firefox шрифт полужирный, но его нет в Chrome. Что здесь происходит? Пробная очистка кеша.

Safari и Firefox

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;
}

Answer 1

! Важно не лучшая практика здесь, потому что это имеет наивысший уровень приоритета. Используйте более определяющий селектор для цели <th>, например

table th {
  font-weight: bold;
}

или

table tr th {
  font-weight: bold;
}

Answer 2

Работает. Добавьте !important к стилю.

См. На 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);
}