Posso usar uma altura mínima para mesa, tr ou td?

120

Estou tentando mostrar alguns detalhes de uma recepção em uma tabela.

Quero que essa mesa tenha uma altura mínima para mostrar os produtos. Portanto, se houver apenas um produto, a tabela terá pelo menos algum espaço em branco no final. Por outro lado, se houver 5 ou mais produtos, não será aquele espaço vazio.

Eu tentei com este css:

table,td,tr{
  min-height:300px;
}

Mas isto não está funcionando.

Desde já, obrigado.

html css kilkadg
fonte
1
Seria útil se você criar um violino para que possamos testar seu código.
mavrosxristoforos

Respostas:

39

Não é uma boa solução, mas tente desta forma:

<table>
    <tr>
        <td>
            <div>Lorem</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Ipsum</div>
        </td>
    </tr>
</table>

e defina os divs para a altura mínima:

div {
    min-height: 300px;
}

Espero que seja isso que você quer ...

Arnold Zak
fonte
2
@SackySan, você precisa dar as classes divs e, em seguida, fazer esta regra se aplicar apenas a essa classe
Zachary Weixelbaum
408

heightpara tdtrabalhos como min-height:

td {
  height: 100px;
}

ao invés de 

td {
  min-height: 100px;
}

As células da tabela crescerão quando o conteúdo não couber.

https://jsfiddle.net/qz70zps4/

Aureliano Far Suau
fonte
2
No meu Google Chrome (versão 47.0.2526.106 m) rodando em um Windows 7, descobri que a configuração de heightde tdna verdade é processada como paddingsuperior e inferior, o que pode apresentar alguns problemas de layout porque você acha que é realmente um heightespaço. Ele não é mostrado como um estilo ou como um estilo computado nas ferramentas de desenvolvimento, mas quando você passa o mouse sobre o elemento html inspecionado, ele é mostrado na tela.
Felypp Oliveira 30/12/2015
mas a questão era sobre min-height que não funciona! o que acontece se você tiver um texto longo e precisar de outra linha com altura, ele ficará confuso
CMS
como @CMS disse, ele perguntou sobre min-heightnão, heightno entanto, como @frank explica abaixo, ele se comporta da mesma forma para table td. Talvez isso precise de uma explicação um pouco melhor.
dft
3
Esta é definitivamente uma resposta melhor do que a aceita.
Jinjubei
2
Esta resposta acabou de me salvar potencialmente horas de trabalho, deve ser a resposta.
Luke Pring
28

A solução sem divé usado um pseudo elemento como o ::afterprimeiro tdna linha com min-height. Salve seu HTML limpo.

table tr td:first-child::after {
   content: "";
   display: inline-block;
   vertical-align: top;
   min-height: 60px;
}
Alex Omelnitckii
fonte
13

No CSS 2.1, o efeito de 'min-height' e 'max-height' em tabelas, tabelas inline, células de tabela, linhas de tabela e grupos de linha é indefinido.

Então, tente encapsular o conteúdo em um div e dê ao div um min-height jsFiddle aqui

<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
    <tbody>
        <tr>
            <td>
                <div style="min-height: 100px; background-color: #ccc">
                Hello World !
                </div>
            </td>
            <td>
                <div style="min-height: 100px; background-color: #f00">
                Goog MOrning !
                </div>
            </td>
        </tr>
    </tbody>
</table>
Sobin Augustine
fonte
5

se você definir style = "height: 100px;" em um td se o td tem conteúdo que aumenta a célula mais do que isso, ele o fará sem a necessidade de altura mínima em um td.

franco
fonte
0

Tabelas e células de tabela não usam a min-heightpropriedade, definindo sua heightaltura mínima, pois as tabelas se expandirão se o conteúdo as esticar.

Agu Dondo
fonte
-1

Basta usar a entrada css de min-height para uma das células da linha da tabela. Funciona em navegadores antigos também.

.rowNumberColumn {
    background-color: #e6e6e6;
    min-height: 22;
}

<table width="100%" cellspacing="0" class="htmlgrid-table">
    <tr id="tr_0">
            <td width="3%" align="center" class="readOnlyCell rowNumberColumn">1</td>
            <td align="left" width="40%" id="td_0_0" class="readOnlyCell gContentSection">411978430-Intimate:Ruby:Small</td>
Sacky San
fonte