Como faço para especificar em HTML ou CSS o mínimo de largura de uma célula da tabela

Question

Resumo

Qual é a melhor maneira de garantir uma célula da tabela não pode ser menor que um certo mínimo de largura.

Exemplo

Eu quero garantir que todas as células de uma tabela são pelo menos 100px de largura relação da largura do contentor de tabelas.Se não houver mais espaço disponível células da tabela deve preencher esse espaço.

Compatibilidade de navegador

Eu gostaria de encontrar uma solução que funciona em

• IE 6-8
• FF 2-3
• Safari

Em ordem de preferência.

Answer 1

Este CSS deve ser suficiente:

td { min-width: 100px; }

No entanto, nem sempre é obedecido corretamente (min-atributo de largura) por todos os navegadores (por exemplo, o IE6 não gosta é um grande negócio).

Editar: Como o IE6 (e antes) solução, não há um que funciona de forma confiável em todas as circunstâncias, tanto quanto eu sei.Usando o nowrap atributo HTML realmente não alcançar o resultado desejado, como que apenas evita quebras de linha na célula, em vez de especificar uma largura mínima.

No entanto, se nowrap é usado em conjunto com um regular a largura da célula de propriedade (tais como o uso de largura:100px), o 100px vai agir como uma largura mínima e a célula ainda vai se expandir com o texto (devido à nowrap).Este é um a menos do que o ideal de solução, que não pode ser plenamente aplicado usando CSS e, como tal, seria tedioso para implementar, se você tiver várias tabelas que você deseja aplicar.(É claro que toda esta solução alternativa cai se você quer ter dinâmico quebras de linha em suas células, de qualquer forma).

Answer 2

Outro hack é o velho 1x1 pixel transparente truque.Insira um 1x1 gif transparente de imagem e defina a largura da tag de imagem para a largura que você deseja.Isto irá forçar a célula para ser pelo menos tão grande como a imagem.

Answer 3

Eu sei que essa é uma velha pergunta, mas eu pensei que eu iria partilhar algo que não foi mencionado (Apesar de muito simples no conceito..) você pode colocar apenas um <div> dentro da tabela (em um dos <td>'s ou algo assim) e definir o <div> para min-width.a tabela vai parar no <div>'s de largura.Apenas pensei que eu iria jogar lá fora, no caso de alguém vem através de esta no google.Também, eu não tenho tanta certeza sobre como min-width é tratada em I. E6.mas o que já foi abordado em outra resposta.

Answer 4

Eu tive algum sucesso com:

    min-width: 193px;
    width:auto !important; 
    _width: 193px;  /* IE6 hack */

Com base em uma combinação de Vatos resposta e uma altura mínima do artigo aqui: http://www.dustindiaz.com/min-height-fast-hack/

Answer 5

o que sobre esta propriedade css

min-width: 100px

mas realmente não funciona no IE6, se não me engano

se você não quiser fazer isso no css forma, eu suponho que você pode adicionar esse atributo

nowrap="nowrap"

na sua tabela de dados de tag

Answer 6

Este é um cross-browser forma para a configuração de largura mínima e/ou mimimum altura:

{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}

O IE 6 não entende !importante
O IE 6 vê width/height:200px (substituição automática)

Outros navegadores entender o min - e !importante

Eu não sou 100% familiarizado com o comportamento das larguras de TD elementos, mas isso tudo funciona muito bem no ge tags DIV

BTW:

Com base em uma combinação de Vatos resposta e uma altura mínima do artigo aqui: http://www.dustindiaz.com/min-height-fast-hack/

Isto não está funcionando por causa da ordem das 2 primeiras linhas, eles precisam estar na ordem certa (pensar sobre o mais acima) ;)

Answer 7

O IE6 alças largura min-width:

td {
    min-width: 100px;
    _width: 100px;/* IE6 hack */
}

Se você deseja que o IE6 para lidar com largura normal, como navegadores, dê a ele um overflow:visible;(não é o caso aqui)