0

estou com um problema bem chato. Estou criando uma tabela e nela estou colocando um padding de 5%. E Quando vou no navegador para conferir se esta certo, o atributo esta no elemento, porém não esta aplicado. Más quando eu abro o Inspecionar, e desmarco e marco esse padding, ele funciona. O que será que tem de errado ?

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>

2 Respostas 2

2

Faltou você completar a estrutura adicionando o 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>

Outra coisa é você definir o padding com porcentagem, não faz nenhum sentido, irá deformar a tabela, recomendo setar paddings e margins com propriedades estáticas ou com 'vw' que é relativa mas não se baseia no elemento.

1
0

Sem ver o resto do documento, o problema é provavelmente o tamanho referencial (5%) ao invés de um tamanho absoluto.

Esse tamanho é calculado com referencia no tamanho do elemento que o contém que se for referencial também (o padrão é se ajustar ao tamanho do conteúdo) não irá funcionar.

Ao você desmarcar e marcar, ele funciona por nesse momento o elemento externo ter um tamanho calculado.

Experimente colocar um tamanho fixo por exemplo 10px, ou colocar um tamanho fixo no elemento que o contém:

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;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .