Назначать стили как содержание

Не возможно давать стиль элементам, основанный на Вашем контенте с CSS, за исключением псевдокласса :empty, что в твоем случае не поможет нам.

Как, если ты используешь vanilla Javascript?

Первый ты создаешь простую функцию, которая проверяла бы, если текст внутри твоего элемента <th> будь в чистых прописных буквах:

 function todasMayusculas(str) {
   return str.toUpperCase() == str;
 }

Эта функция возвратит тебе booleano, уже будьте true или false.

Чем нам будет служить это?

Ты можешь пробегать DOM в поисках элементов <th> уже будьте с:

document.querySelectorAll("th") или document.getElementsByTagName("th")

document.querySelectorAll () ~ document.getElementsByTagName ()

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

var th = document.querySelectorAll("th");

for (var i = 0; i < th.length; i++) {
    ...
}

После ты используешь функцию, которую ты создал из-за каждого элемента внутри списка.

Как вышеупомянутая функция надеется, что (string) мы используем цепь textContent, который возвращает нам текст внутри элемент.

Если результат todasMayusculas() он бросает нас true, ты добавляешь класс твоего выбора, в этом случае он назовется seleccionado:

for (var i = 0; i < th.length; i++) {
    if (todasMayusculas(th[i].textContent)) {
      th[i].classList.add("seleccionado");
    }
}

В конце концов, ты добавляешь этот класс к твоему файлу CSS с желанными свойствами:

.seleccionado {
  background-color: #dfe6e9;
  font-weight: bold;
}

Мы соединяем все и это остается так:

(function() {
  var th = document.querySelectorAll("th");

  for (var i = 0; i < th.length; i++) {
    if (todasMayusculas(th[i].textContent)) {
      th[i].classList.add("seleccionado");
    }
  }

  function todasMayusculas(str) {
    return str.toUpperCase() == str;
  }
})();

.seleccionado {
  background-color: #dfe6e9;
  font-weight: bold;
}

<table>
  <thead>
  </thead>
  <tbody>
    <tr>
      <th>ALL AVAILABLE METALS</th>
      <td></td>
    </tr>
    <tr class="alt">
      <th>Rose Gold</th>
      <td>
        <p>14Kt, 18Kt</p>
      </td>
    </tr>
    <tr class="">
      <th>White Gold</th>
      <td>
        <p>14Kt, 18Kt</p>
      </td>
    </tr>
    <tr class="alt">
      <th>Yellow Gold</th>
      <td>
        <p>14Kt, 18Kt</p>
      </td>
    </tr>
    <tr class="">
      <th>OTHER INFORMATION</th>
      <td></td>
    </tr>
    <tr class="alt">
      <th>Finish Type</th>
      <td>
        <p>Polished</p>
      </td>
    </tr>
    <tr class="">
      <th>Width Bottom</th>
      <td>
        <p>2.1mm</p>
      </td>
    </tr>
  </tbody>

jsFiddle

Замечание:

У тебя есть орфографическая ошибка в слове available.