применить стиль столбца к элементу тела таблицы

Question

Я создал следующую таблицу в html. Я хочу применить стиль к элементам таблицы таблицы в столбце, который я добавил в класс css. Но стиль не должен применяться к столбцу заголовка. только к колонке тела.

Здесь для примера у меня есть класс CSS, называемый «body-right». В результате я хочу, чтобы все элементы тела таблицы в столбце «Значение» должны были правильно выравниваться, за исключением столбца заголовка. Как это сделать в css. Большое спасибо.

<table> 
    <thead> 
     <tr> 
      <td>Criteria</td> 
      <td>Description</td> 
      <td class="body-right">Value</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>ABC</td> 
      <td>GGGGGG</td> 
      <td>35.63</td> 
     </tr> 
     <tr> 
      <td>XYZ</td> 
      <td>HHHHH</td> 
      <td>68.26</td> 
     </tr> 
     <tr> 
      <td>MNP</td> 
      <td>KKKKK</td> 
      <td>45.26</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

Используйте это:

tbody td:nth-of-type(3) { 
    text-align: right; 
} 

Пример

table { 
 
    border-spacing: 0; 
 
    border-collapse: collapse; 
 
    font: 14px verdana; 
 
} 
 

 
td { 
 
    padding: 0.2em; 
 
    border: 1px solid gray; 
 
} 
 

 
tbody td:nth-of-type(3) { 
 
    text-align: right; 
 
    background: yellow; 
 
    width: 4em; 
 
}

<table> 
 
    <thead> 
 
     <tr> 
 
      <td>Criteria</td> 
 
      <td>Description</td> 
 
      <td class="body-right">Value</td> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>ABC</td> 
 
      <td>GGGGGG</td> 
 
      <td>35.63</td> 
 
     </tr> 
 
     <tr> 
 
      <td>XYZ</td> 
 
      <td>HHHHH</td> 
 
      <td>68.26</td> 
 
     </tr> 
 
     <tr> 
 
      <td>MNP</td> 
 
      <td>KKKKK</td> 
 
      <td>45.26</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

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

THEAD .Body правой {выравнивания текста: справа; }