Definindo a altura da linha da tabela

136

Eu tenho este código:

<table class="topics" >
    <tr>
        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">Test</td>
        <td style="padding: 0 4px 0 0;">1.0</td>
        <td>abc</td>
    </tr>
    <tr>

        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">test2</td>
        <td style="padding: 0 4px 0 0;">1.3</td>
        <td>def</td>
    </tr>
</table>

As linhas estão espaçadas demais. Eu quero as linhas mais próximas.

O que fiz foi adicionar o seguinte CSS, mas ele não parece mudar nada.

.topics tr { height: 14px; }

O que estou fazendo de errado?

html css

— Hiromi Nagashim
fonte

Relacionados: stackoverflow.com/questions/2092696/how-to-fix-height-of-tr

— Thilo

165

tente isto:

.topics tr { line-height: 14px; }

— refaelos
fonte

160

Não entendo por que isso tem tantos votos, não resolve o problema. Só funciona se você tiver apenas 1 linha de texto no tr. Esta solução define a altura da linha , não a traltura.

— BenR

2

Como mencionado em um comentário posterior. a altura deve ser maior que a altura do seu maior conteúdo. Caso contrário, ele usará apenas a altura do maior conteúdo como a altura mínima. E sim, isso funciona apenas para uma linha de texto.

— Varun Chatterji

1

É útil apenas no caso de um texto de linha.

— Shekhardtu 31/05/19

23

tente definir o atributo para td :

.topic td{ height: 14px };

— Dave
fonte

10

Não parecem ao trabalho (Cromo 12 / Ubuntu 11.04) .

— David diz que restaura Monica

1

seriamente? Eu pensei que isso sempre teria funcionado. certamente faz agora. de qualquer maneira, essa é a solução que achei melhor, pois a maneira como as células da tabela funcionam é expandir para o conteúdo. assim heightem um tdé, efetivamente Altura mínima de que neste caso é realmente o que você quer

— Simon_Weaver

@dave No meu caso, também apenas @davea solução funcionou. line-heightnão funcionou com trou td. Não tenho certeza se isso tem algo a ver com o tempo, uma vez que a postagem original tem seis anos e algumas regras de html / css podem ter sido alteradas agora, já que a maioria dos navegadores agora usa HTML5.

— nam

Além disso, na minha experiência , se você definir uma altura em tr e, em seguida, uma altura de 100% ou qualquer altura no td dentro dele, acredito que o sistema acha que a altura está definida no td e não segue a altura do tr e a linha é definida como a altura padrão. Então, basta definir a altura no td. Esta foi a razão pela qual eu votei com sucesso nesta resposta

— user3245268

9

Você também pode remover espaçamento extra se colocar uma border-collapse: collapse;instrução CSS em sua tabela.

— fijter
fonte

6

Encontrei a melhor resposta para meus propósitos:

.topics tr { 
    overflow: hidden;
    height: 14px;
    white-space: nowrap;
}

A white-space: nowrapé importante, pois evita que as células do seu linha de quebrar em várias linhas.

Pessoalmente, gosto de adicionar text-overflow: ellipsisaos meus elementos the tdpara tornar o texto transbordante mais agradável adicionando os pontos finais à direita, por exemploToo long gets dots...

— Tom Dickman
fonte

5

altura da linha só funciona quando é maior que a altura atual do conteúdo de <td>. Portanto, se você tiver um ícone de 50 x 50 na tabela, a traltura da linha não criará uma linha menor que 50 px (+ preenchimento).

Como você já definiu o preenchimento para 0ele, deve haver outra coisa,
por exemplo, um tamanho de fonte grande dentro tdque seja maior que seus 14 px.

— Alex
fonte

5

Se você estiver usando o Bootstrap, veja paddingseus tds.

— 1 homem
fonte

1

uma vez eu preciso corrigir a altura de uma linha com valor específico usando CSS embutido da seguinte maneira:

<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>

— Mestre Shafiqur Rahman
fonte

1

Quanto a mim, decidi usar estofados. Não é exatamente o que você precisa, mas pode ser útil em alguns casos.

table td {
    padding: 15px 0;
}

— Eugene Porodko
fonte