2

Tenho uma <table> onde o conteúdo dos <td> são números aleatórios, preciso que os números ocupem 100% da célula, por mais que eu coloque o tamanho 100%, com padding e margin zero, sempre fica um padding dentro da célula. Preciso que o número toque na borda da superior e inferior ou seja, margin:0 e padding: 0. Já tentei de tudo mas o padding insiste em continuar.

Segue um exemplo de como está meu css.

    table{
        border: 1px solid;
        border-collapse: collapse;  
        border-spacing: 0;
        border-padding: 0;
        cellpadding: 0;
        cellspacing: 0;
        width: 300px;   
        TABLE-LAYOUT: fixed;
        margin-right: 10px;
        margin-left: 10px;      
        margin-bottom: 6px;         
    }

    table td {  
        border-spacing: 0;
        border-padding: 0;
        cellpadding: 0;
        cellspacing: 0;                         
        border: 1px solid;  
        text-align: center;                                                                         
        font-weight: bold;  
        font-size: 20px;                        
    }

Para ilustrar o desespero, coloquei o padding zero pra td e table e o padding de dentro da cell continua.

modelo tabela

1 Resposta 1

1

O principal é você definir o tamanho da linha line-height. Isso acontece porque essa propriedade já vem com um espaçamento predefinido, logo basta você mudar para o tamanho que se adeque à célula:

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

table {
  border: 1px solid;
  border-collapse: collapse;
  border-spacing: 0;
  width: 300px;
  TABLE-LAYOUT: fixed;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 6px;
}

table td {
  border-spacing: 0;
  border: 1px solid;
  text-align: center;
  font-weight: bold;
  font-size: 2.3em;
  line-height: 25px; !important
}
<table border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

Deu um reset no css e tirei algumas propriedades que não acrescentavam em nada.

1
  • Samir, RESOLVIDO! Muito obrigado na, mosca. Perfeito, lutei procurando algo mas nem passei perto da sua solução. Novamente, Obrigado! Commented 26/12/2016 às 21:14

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 .