Como corrigir a altura do TR?

102

É possível fixar a altura de uma linha (tr) em uma mesa?

O problema aparece quando eu encolho a janela do navegador, algumas linhas começam a brincar e não consigo fixar a altura da linha.

Tentei de várias maneiras: tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

Estou usando o IE7

Estilo

.tableContainer{
    color:#0076BF;
    margin: -10px 0px -10px 0px;
    border-spacing: 10px;
    empty-cells:show;
    width:90%;
    text-align:left;
} 

.tableContainer tr td{
    white-space:nowrap;
    text-align:left;
}

Código HTML.

<table class="tableContainer" cellspacing="10px">
    <tr style="height:15px;">
        <td>NHS Number</td>
        <td>&#160;</td>
        <td>Date of Visit</td>
        <td>&#160;</td>
        <td colspan="3">Care Time Started</td>
        <td>&#160;</td>
        <td rowspan="2" style="text-align:right;vertical-align:bottom;">&#9745;</td>
        <td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/>                        care starts</td>
    </tr>
    <tr>
        <td width="90" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="80" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="40" class="tableContainerRow2">&#160;</td>
        <td  width="5">:</td>
        <td width="40" class="tableContainerRow2">&#160;</td>        
        <td >&#160;</td>
    </tr>
</table>
html html-table row Amra
fonte

Respostas:

97

As tabelas são duvidosas (pelo menos no IE) quando se trata de fixar alturas e não quebrar o texto. Acho que você descobrirá que a única solução é colocar o texto dentro de um divelemento, assim:

td.container > div {
    width: 100%;
    height: 100%;
    overflow:hidden;
}
td.container {
    height: 20px;
}
<table>
    <tr>
        <td class="container">
            <div>This is a long line of text designed not to wrap 
                 when the container becomes too small.</div>
        </td>
    </tr>
</table>
Expandir trecho

Desta forma, a divaltura do 'é a da célula que a contém e o texto não pode crescer div, mantendo a célula / linha com a mesma altura independente do tamanho da janela.

Andy E
fonte
1
Obrigado pelo conselho, parece funcionar, mas parece um pouco confuso embora.
Amra
Fico feliz em ajudar :-) Infelizmente, código confuso geralmente é o caso em hacks e soluções alternativas.
Andy E
Eu uso [código] .container {largura: 100%; altura máxima: 40px; estouro: oculto; } [/ code] e [code] <div class = 'container'> </div> [/ code].
Cees Timmerman
Eu fiz o mesmo método, colocando uma div dentro de uma tag <th> e funcionou bem. Eu tive esse problema apenas no Chrome. FFox, Safari e IE suportaram bem a altura definida no cabeçalho da tabela. Obrigado por compartilhar! :)
Mário Rodrigues
não funciona no safari ... você precisa definir a altura e largura reais no div também, não apenas no td
Radu Simionescu
15

Tente colocar a altura em uma das células, assim:

<table class="tableContainer" cellspacing="10px">
 <tr>
  <td style="height:15px;">NHS Number</td>
  <td>&#160;</td>

Observe, entretanto, que você não poderá tornar a célula menor do que o conteúdo requer. Nesse caso, você teria que diminuir o texto primeiro.

cutucar
fonte
1
Tenho certeza de que você não usa "px" em atributos html.
desflores
10
Tenho certeza que você pode usar no atributo de estilo.
Burak Dobur
11

Definir a tdaltura para menos do que a altura natural de seu conteúdo

Como as células da tabela desejam ser pelo menos grandes o suficiente para encerrar seu conteúdo, se o conteúdo não tiver altura aparente, as células podem ser redimensionadas arbitrariamente.

Ao redimensionar as células, podemos controlar a altura da linha.

Uma maneira de fazer isso é definir o conteúdo com uma absoluteposição dentro da relativecélula e definir o heightda célula e o lefte topdo conteúdo.

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
.set-height td {
  position: relative;
  overflow: hidden;
  height: 3em;
}
.set-height p {
  position: absolute;
  margin: 0;
  top: 0;
}
/* table layout fixed */
.layout-fixed {
  table-layout: fixed;
}
/* td width */
.td-width td:first-child {
  width: 33%;
}
<table><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>table-layout: fixed</code> applied:</h3>
<table class="layout-fixed"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>&lt;td&gt; width</code> applied:</h3>
<table class="td-width"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
Expandir trecho

A table-layoutpropriedade

A segunda tabela no snippet acima foi table-layout: fixedaplicada, o que faz com que as células recebam largura igual, independentemente de seu conteúdo, dentro do pai.

De acordo com caniuse.com , não há problemas de compatibilidade significativos relacionados ao uso de table-layoutem 12 de setembro de 2019.

Ou simplesmente aplique widtha células específicas como na terceira tabela.

Esses métodos permitem que a célula que contém o conteúdo efetivamente sem tamanho criado pelo aplicativo position: absolutereceba uma circunferência arbitrária.

Muito mais simples ...

Eu realmente deveria ter pensado nisso desde o início; podemos manipular o conteúdo da célula da tabela em nível de bloco de todas as maneiras usuais e, sem destruir completamente o tamanho natural do conteúdo position: absolute, podemos deixar a tabela para descobrir qual deve ser a largura.

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
table p {
  margin: 0;
}
.cap-height p {
  max-height: 3em;
  overflow: hidden;
}
<table><tbody>
  <tr class="cap-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td>
  </tr>
  <tr class="cap-height">
    <td><p>Bar</p></td>
    <td>Baz</td>
  </tr>
  <tr>
    <td>Qux</td>
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
  </tr>
</tbody></table>
Expandir trecho

Fred Gandt
fonte
Finalmente uma resposta que parece promissora! Tenho que experimentar assim que estiver no trabalho, darei um feedback se não esquecer.
jeromej
1
Funcionou como um encanto! (Aviso de que remove text-align: centere outros truques de centralização embora ... como se baseia position: absolute)
jeromej
Isso funciona para a altura no meu caso, mas ao usar postion: absolute, perco a largura automática da célula. Tentar encontrar uma maneira de fazer com que a tabela ainda calcule corretamente a largura da célula enquanto controla a altura da linha. Alguma ideia?
cinzas de
@ash - Não estou pensando imediatamente em nenhuma maneira de manter a largura totalmente automática após destruir efetivamente o tamanho do conteúdo, mas podemos forçar as células da tabela a serem arbitrariamente largas. Expandi o trecho de exemplo para mostrar um método que pode ajudá-lo. Vou pensar um pouco mais e acrescentar mais detalhes se algo útil vier à mente :)
Fred Gandt
Obrigado Fred. Observe que eu poderia ter cabeçalhos (<th>) para dar um tamanho fixo às colunas, mas estou preocupado que os cabeçalhos possam ser muito estreitos ou muito largos.
cinza
8

Colocar div dentro de um td funcionou para mim. 

<table width="100%">
    <tr><td><div style="font-size:2px; height:2px; vertical-align:middle;">&nbsp;</div></td></tr>
user2987600
fonte
2

A largura da sua mesa é de 90%, o que é relativo ao seu recipiente.

Se você apertar a página, provavelmente estará apertando também a largura da mesa. A largura das células também é reduzida e o navegador compensa aumentando a altura.

Para manter a altura intacta, você deve ter certeza de que as larguras das células podem conter o conteúdo pretendido. Corrigir a largura da mesa é provavelmente algo que você deseja tentar. Ou talvez brinque com a largura mínima da mesa.

okw
fonte
1

Tive que fazer isso para obter o resultado que queria:

<td style="font-size:3px; float:left; height:5px; vertical-align:middle;" colspan="7"><div style="font-size:3px; height:5px; vertical-align:middle;"><b><hr></b></div></td>

Recusou-se a trabalhar apenas com o celular ou div e precisava de ambos.

Jen
fonte
-5

Isso ocorre porque as palavras estão se enrolando e entrando em novas linhas, portanto esticando o TR. Isso deve solucionar seu problema:

overflow:hidden;

Coloque isso nos estilos TR Embora deva funcionar, por que não deixá-lo esticar o0

PS. Eu não testei, então não odeio XD

Ozzy
fonte
3
Não odiava, mas há uma lista de estilos suportados pelo elemento TD no IE em msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx . overflownão é um deles.
Andy E