CSS attribute does not work

Question

CSS attribute does not work

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I have a really annoying problem. I am creating a table and in it I am putting a 5% padding. And when I go in the browser to check if this is right, the attribute is in the element, but it is not applied. Bad when I open the inspect, and unmark and mark this padding, it works. 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>

html css

asked by anonymous 02.05.2017 / 02:12

2 answers

When accessing with specific user it gives an ssh on another server [closed] Table scroll with scroll position according to date

score 2 · Answer 1

You missed completing 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, it will deform the table, I recommend setting paddings and margins with static properties or with 'vw' that is relative but not based on the element.

score 0 · Answer 2

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

This size is calculated with reference to the size of the element that contains it that is also referential (the default is to fit the content size) will not work.

When you uncheck and mark, it works by then the outer element has a calculated size.

Try to put 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;
}