В таблице HTML, как переопределить размер шрифта (alerady установлен на уровне строки) на уровне ячейки? - PullRequest
2 голосов
/ 06 ноября 2019

У меня есть HTML-таблица, в которой есть строка с размером шрифта 10:

<tr style="font-size: 10 px">

В этой строке у меня есть несколько ячеек;все они наследовали бы размер шрифта, установленный на уровне строки, показанном выше.

Но я хотел бы переопределить размер шрифта в приведенной выше строке, и я хотел бы сделать это только для нескольких ячеек (и невсе).

Я попытался переопределить размер шрифта на уровне ячейки, как показано ниже:

<td style="font-size: 12 px">

Но, к сожалению, приведенное выше переопределение, похоже, не вступает в силу, и я все еще вижу все ячейки ввыше строка только с font-size 10.

Как мне добиться этого переопределения?

Пожалуйста, помогите!

Ответы [ 3 ]

2 голосов
/ 06 ноября 2019

Правило !important в конце значения будет переопределять любые другие объявления стилей этого атрибута, , включая встроенные стили .

tr {
  font-size: 10px;
}

td {
  font-size: 20px !important;
}
<!DOCTYPE html>
<html>

<body>

  <h2>Basic HTML Table</h2>

  <table style="width:100%">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </table>

</body>

</html>
0 голосов
/ 06 ноября 2019

Используйте style.css вместо встроенного стиля.

<table class="my-table">
        <tr">
            <td>1 Сell 1 Row</td>
            <td class="accent-cell">2 Сell 1 Row</td>
            <td>3 Сell 1 Row</td>
        </tr>
        <tr>
            <td>1 Сell 2 Row</td>
            <td>2 Сell 2 Row</td>
            <td>3 Сell 2 Row</td>
        </tr>            
</table>

В style.css определяют:

.my-table tr{
    font-size: 10px;
}

.my-table .accent-cell{
    font-size: 12px;
}
0 голосов
/ 06 ноября 2019

Эй, используйте важное ключевое слово с этим!

<td style="font-size: 12 px; important;">
...