CSS attribute does not work

Question

I have a very boring problem. I’m creating a table and I’m putting a 5% padding on it. E When I go in the browser to check if this is right, the attribute is in the element, but it is not applied. But when I open the Inspect, and I clear and mark this padding, it works. I wonder what’s wrong ?

css

.item_header_no {
    font-size: 1.2em;
    padding: 5%;
    background-color: black;
    color: white;   
}

html

<tr>
    <td class="item_header_no">Disciplina</td>
    <td class="item_header_no">AC</td>
    <td class="item_header_no">AI</td>
    <td class="item_header_no">AS</td>
    <td class="item_header_no">MF</td>
</tr>

Answer 1

Missed you to complete the structure by adding the table

.item_header_no{

font-size: 1.2em;
padding: 5vw;
background-color: black;
color: white; 

}

<table>
  <tr>
      <td class="item_header_no">Disciplina</td>
      <td class="item_header_no">AC</td>
      <td class="item_header_no">AI</td>
      <td class="item_header_no">AS</td>
      <td class="item_header_no">MF</td>
  </tr>
</table>

Another thing is you set the padding with percentage, it makes no sense, will deform the table, recommend setar paddings and margins with static properties or with 'vw' which is relative but not based on the element.

Answer 2

Without seeing the rest of the document, the problem is probably the referential size (5%) rather than an absolute size.

This size is calculated with reference to the size of the element that contains it which if referenced as well (default is to adjust to content size) will not work.

When you uncheck and mark, it works by that time the external element has a calculated size.

Try putting a fixed size for example 10px, or put a fixed size on the element that contains it:

HTML:

<table class="table_header">
  <tr>
    <td class="item_header_no">Disciplina</td>
    <td class="item_header_no">AC</td>
    <td class="item_header_no">AI</td>
    <td class="item_header_no">AS</td>
    <td class="item_header_no">MF</td>
  </tr>
  <table>

CSS:

.item_header_no {
  font-size: 1.2em;
  padding: 5%;
  background-color: black;
  color: white;
}

.table_header {
  width: 500px;
}