É uma DIV dentro de um TD uma má idéia?

Question

Parece que ouvi / li em algum lugar que uma dentro <div> de um <td> foi um não-não. Não que isso não vai funcionar, apenas algo sobre eles não sendo realmente compatível com base no seu tipo de exibição. não consigo encontrar nenhuma evidência para apoiar o meu palpite, então eu pode ser totalmente errado.

Answer 1

Usando um div instide um td não é pior do que qualquer outra forma de utilizar tabelas para layout. (Algumas pessoas nunca usar tabelas para layout embora, e eu acontecer de ser um deles.)

Se você usar um div em um td você vai, porém, entrar em uma situação onde pode ser difícil prever como os elementos serão dimensionados. O padrão para um div é determinar a sua largura de seu pai, e o padrão para uma célula de tabela é determinar seu tamanho, dependendo do tamanho do seu conteúdo.

As regras de como um div deve ser dimensionado é bem definidos nas normas, mas as regras de como um td deve ser dimensionado não está bem definido, de modo diferentes navegadores usam ligeiramente diferentes algoritmos.

Answer 2

Depois de verificar a XHTML DTD eu descobri que um -element é permitido para conter elementos de bloco, como cabeçalhos, listas e também

-elements. Assim, usando um

-element dentro de um -element não viola o padrão XHTML. Tenho certeza de que outras variações modernas de HTML têm um modelo de conteúdo equivalente para o -element.

Aqui estão as regras DTD relevantes:

<!ELEMENT td %Flow;>
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY %Flow "(#PCDATA | %block; | form | %inline; | %misc;>
<!ENTITY %block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

No. Não necessariamente.

Se você precisa colocar um DIV dentro de um TD, certifique-se que você está usando o TD adequadamente. Se você não se preocupam com tabulares-dados e semântica, então você finalmente vai se preocupam com DIVs em TDs. Eu não acho que há um problema embora -. Se você Have para fazer isso, você está bem

De acordo com a especificação HTML

A <div> pode ser colocado onde fluxo de conteúdo deverá ¹ , que é o modelo de conteúdo <td> ² .

-célula da tabela A pode legitimamente conter elementos nível de bloco portanto, não é, inerentemente, um faux-pas. implentation navegador, é claro, deixa essa posição especulativa-teórica. Isso pode causar problemas de layout e bugs.

Embora as tabelas foram utilizados para a disposição -e às vezes ainda são- Imagino que a maioria dos navegadores irá processar o conteúdo corretamente. Mesmo IE.

Se você quiser posição de uso: absolute; na div com position: relative; na td você vai correr em problemas. FF, Safari e Chrome (Mac, não PC embora) não vai posicionar a div em relação ao td (como seria de esperar), este também é verdadeiro para divs com display: table-whatever; então se você quiser fazer isso você precisa de duas divs, um para o width: 100%; height: 100%; recipiente e nenhuma borda para que ele preenche o td sem qualquer impacto visual. e, em seguida, a um absoluto.

que não seja porque não basta dividir a célula?

Já enfrentei o problema, colocando um <div> dentro <td>.

Eu era incapaz de identificar o div usando document.getElementById() se eu colocar isso dentro de td. Mas fora, ele estava funcionando bem.

Como todos mencionados, pode não ser uma boa idéia para fins de layout. Cheguei a esta pergunta, porque eu estava pensando o mesmo e eu só queria saber se seria um código válido.

Uma vez que é válido, você pode usá-lo para outros fins. Por exemplo, o que eu vou usá-lo para é colocar alguma fantasia "cssed" divs dentro de linhas da tabela e, em seguida, usar uma função jQuery rápido para permitir que o usuário para classificar as informações por preço, nome, etc. Desta forma, o apenas a tabela de layout vai dar-me é o "fim vertical", mas vou controlar largura, altura, fundo, etc dos divs por CSS.

Duas maneiras de lidar com ele

1. colocar div dentro tag tbody
2. colocar div dentro tag tr

Ambas as abordagens são válidas, se você vê feference: https://stackoverflow.com/a/23440419/2305243

Ele quebra semântica , isso é tudo. Ele funciona muito bem, mas pode haver leitores de tela ou algo abaixo da estrada que não vai desfrutar de processar o seu HTML, se você "semântica quebrar".

Answer 3

No. Não necessariamente.

Se você precisa colocar um DIV dentro de um TD, certifique-se que você está usando o TD adequadamente. Se você não se preocupam com tabulares-dados e semântica, então você finalmente vai se preocupam com DIVs em TDs. Eu não acho que há um problema embora -. Se você Have para fazer isso, você está bem

De acordo com a especificação HTML

A <div> pode ser colocado onde fluxo de conteúdo deverá ¹ , que é o modelo de conteúdo <td> ² .

Answer 4

-célula da tabela A pode legitimamente conter elementos nível de bloco portanto, não é, inerentemente, um faux-pas. implentation navegador, é claro, deixa essa posição especulativa-teórica. Isso pode causar problemas de layout e bugs.

Embora as tabelas foram utilizados para a disposição -e às vezes ainda são- Imagino que a maioria dos navegadores irá processar o conteúdo corretamente. Mesmo IE.

Answer 5

Se você quiser posição de uso: absolute; na div com position: relative; na td você vai correr em problemas. FF, Safari e Chrome (Mac, não PC embora) não vai posicionar a div em relação ao td (como seria de esperar), este também é verdadeiro para divs com display: table-whatever; então se você quiser fazer isso você precisa de duas divs, um para o width: 100%; height: 100%; recipiente e nenhuma borda para que ele preenche o td sem qualquer impacto visual. e, em seguida, a um absoluto.

que não seja porque não basta dividir a célula?

Answer 6

Já enfrentei o problema, colocando um <div> dentro <td>.

Eu era incapaz de identificar o div usando document.getElementById() se eu colocar isso dentro de td. Mas fora, ele estava funcionando bem.

Answer 7

Como todos mencionados, pode não ser uma boa idéia para fins de layout. Cheguei a esta pergunta, porque eu estava pensando o mesmo e eu só queria saber se seria um código válido.

Uma vez que é válido, você pode usá-lo para outros fins. Por exemplo, o que eu vou usá-lo para é colocar alguma fantasia "cssed" divs dentro de linhas da tabela e, em seguida, usar uma função jQuery rápido para permitir que o usuário para classificar as informações por preço, nome, etc. Desta forma, o apenas a tabela de layout vai dar-me é o "fim vertical", mas vou controlar largura, altura, fundo, etc dos divs por CSS.

Answer 8

Duas maneiras de lidar com ele

1. colocar div dentro tag tbody
2. colocar div dentro tag tr

Ambas as abordagens são válidas, se você vê feference: https://stackoverflow.com/a/23440419/2305243

Answer 9

Ele quebra semântica , isso é tudo. Ele funciona muito bem, mas pode haver leitores de tela ou algo abaixo da estrada que não vai desfrutar de processar o seu HTML, se você "semântica quebrar".