Publicado em 25 de abr.

CSS para tabela com combobox responsiva

#desenvolvimento-frontend #bootstrap #css @media #tabela responsiva

Boa noite a todos,

Segue imagem para ficar mais claro: https://uploaddeimagens.com.br/images/000/608/382/original/TABELAS.jpg?1461546501

Tenho uma tabela onde cada <td> possui um combobox que puxa dados do banco. A tabela é responsiva com bootstrap e suas propriedades são:

<table class="table table-action table-striped table-bordered table-hover table-responsive">
 <thead>
 <th>Nome da Obra</th>
 <th>Autor</th>
 <th>Tema</th>
 <th>Editora</th>
 <th>Disciplina</th>
 <th>Palavras-Chave</th>
 <th>Tipo de Arquivo</th>
 </thead>

 <tbody>
 <tr>
 <td>
 //meu php+html para select option (combobox)
 </td>
 </tr>
 </tbody>
</table>

Esta tabela é responsiva "perfeitamente", pois eu utilizo este mesmo código para gerar outra tabela onde não há os combobox (select options), utilizo ela para listar os dados da busca, onde neste caso, ela apresenta responsividade perfeita.

Também tenho um media css (que eu andei fuçando muito e pode ter algo meio errado ai, hehe):

@media (max-width: 480px){

 #trr {
 border-bottom: 1px solid #dddddd;
 }
 #tdr {
 border: 0;
 }
 .table-action td {
 display: block;
 }
 .table-responsive tr {
 display: block;
 }
 .table-responsive th {
 display: block;
 }

 }

A tabela sem os combobox, que funciona perfeitamente, com este css acima, ele pega e ao reduzir o tamanho da tela ao máximo permitido pelo navegador, ele ajusta fazendo com que os dados da tabela fiquem "aninhados" ou alinhados... De forma vertical, formando assim a linha da minha tabela verticalmente:

Nome da Obra | Autor | Editora | Disciplina

Nome da Obra

Autor

Editora

Disciplina

PERFEITO! É isso mesmo que eu queria e consegui fazer, mas ai que vem o problema...

Na tabela onde tenho o combobox, ela não fica responsiva nem por reza braba e sai tudo bixado. Como eu consigo fazer ela ficar organizada o mais amigável possível para o usuário?

Discussão (14)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

L. Henrique· 25 de abr.

DougCoder,

Você possui algum link ou ambiente de testes para que possamos olhar e trabalhar em cima de algo mais "paupável"? E uma pergunta: O texto dentro desses select's são muito grandes? Eles cabem no espaço disponibilizado pela view?

Fica difícil definir um problema em específico dessa maneira, mas vou deixar algumas possíveis soluções:
**/ Se o texto for grande /**

word-break: break-all;

**/ Se não for problema do texto, faça um teste no elemento pai usando overflow /**

overflow: hidden;
overflow: scroll;

Nesse caso, teste as duas opções.

**/* Testar algumas condições na div pai e no select */**

white-space: nowrap;
white-space: normal;

Algumas das soluções aqui possivelmente não vai obter nenhum resultado, mas algumas deles causam esses bugs, então vale os testes.

**/* Propriedades só para o select - Talvez esse seja o ideal */**

box-sizing: border-box;

Essa é uma das principais soluções quando algum input sai fora da largura do elemento pai.

L. Henrique· 25 de abr.

Editado: Esse comentário não deveria existir, mas o iMasters gosta de replicar minhas respostas umas 500 vezes. O.o

DougCoder· 25 de abr.

Bom dia!

Então, não tenho este ambiente no momento, posso disponibilizar imagens com exemplo dos campos e caso não fique tão claro ai eu faço um host temporário para verificar, mas só consigo fazer isso a noite. E os campos cabem sim na view, eles se redimensionam automaticamente e são divididos por vírgula tudo dentro do form, com limite de 5 palavras nos campos de palavras chave, autores, disciplinas.

Estou meio atrasado para o serviço... Não vou conseguir testar suas dicas agora, mas após as 17:00 eu já faço os testes.

Uma "solução" que acredito que funcione é a seguinte... Você viu a imagem que eu coloquei no post certo? Nela da pra ver que a página com a tabela de resultado do lado direito da imagem joga todas as colunas em forma de linha. É isso que eu quero, só que com a tabela que contém o combobox pode ficar da seguinte maneira:

Nome da Obra (este é meu <th>)

Text-NomeObra (meu campo texto para o dado, meu <td>)

 

Autor (este é meu <th>)

Combobox-Autor (meu <td> com o select do banco)

Editora...

Cbbox editora...

Eu gostaria de transformar estes dados que são em linha reta Nome da Obra | Autor | Editora | ....

Na vertical, eu até consegui fazer isso, porém ele nao fica um abaixo do outro, ele fica os 5 <TH> e depois os 5 <TD>, não consegui colocar o TD abaixo do respectivo TH. Se conseguir fazer só isso, acredito que resolverá o problema!!!

Mais tarde estarei de volta, abraço.

L. Henrique· 25 de abr.

>
Uma "solução" que acredito que funcione é a seguinte... Você viu a imagem que eu coloquei no post certo? Nela da pra ver que a página com a tabela de resultado do lado direito da imagem joga todas as colunas em forma de linha. É isso que eu quero, só que com a tabela que contém o combobox pode ficar da seguinte maneira:

Nome da Obra (este é meu <th>)

Text-NomeObra (meu campo texto para o dado, meu <td>)

 

Autor (este é meu <th>)

Combobox-Autor (meu <td> com o select do banco)

Editora...

Cbbox editora...

Não entendi muito bem o que disse acima. Você quer que quando seja mobile, ele apresente novos elementos pais para os selects? Ou separe eles em th's diferentes?

Beleza. Quando testar, se não funcionar, retorne aqui que tentaremos uma outra solução.

Abraços!

DougCoder· 26 de abr.

Testei de todo quanto é jeito... Sem sucesso :(

Acho que o ideal para não cortar e juntar os itens do combobox entre eles, seria dividir a tabela ao meio. Tipo... Os 3 últimos campos descerem, seria possível?

/applications/core/interface/imageproxy/imageproxy.php?img=https://uploaddeimagens.com.br/images/000/608/930/original/css.jpg?1461631307&key=8e6c24ebc16efb58fddaa1487bb1140e6be3067ce39f1c010645441e3fcdb6eb" alt="css.jpg?1461631307" />

Quando o @media for 480px, se ele ficar assim já estaria ótimo:

/applications/core/interface/imageproxy/imageproxy.php?img=https://uploaddeimagens.com.br/images/000/608/932/original/CSS2.jpg?1461631560&key=8c76eba6fcb156ddbdaf35901108ff9c0ed0721c972787d8d49cc84b8dc78169" alt="CSS2.jpg?1461631560" />

L. Henrique· 26 de abr.

Doug,

Testei uma table com select e tudo funcionou ok, não tive problemas quanto ao responsivo. Você já deu uma olhada no responsive tables do Bootstrap? Aquilo não te serve?

Trabalhar com uma tabela e torna-la responsiva é mais complicado do que se você tivesse usado os elementos de grid do Bootstrap. Essa não seria uma opção? Ou você não pode sair de table?

Abraços!

pwd· 26 de abr.

https://css-tricks.com/responsive-data-tables/

DougCoder· 26 de abr.

>
Doug,

Testei uma table com select e tudo funcionou ok, não tive problemas quanto ao responsivo. Você já deu uma olhada no responsive tables do Bootstrap? Aquilo não te serve?

Trabalhar com uma tabela e torna-la responsiva é mais complicado do que se você tivesse usado os elementos de grid do Bootstrap. Essa não seria uma opção? Ou você não pode sair de table?

Abraços!

Tem como você me mandar o código que realizou o teste para eu ter noção de que eu estou implantando a responsividade corretamente ou estou fazendo cagada.

Olha como ele fica com o responsive do bootstrap de acordo com w3school em: http://www.w3schools.com/bootstrap/bootstrap_ref_css_tables.asp

Utilizei o seguinte igual ao w3, que é o "certo/padrão" do responsive bootstrap:

<div class="table-responsive" >
<form name="form_busca" id="form-busca" method="POST" action="" >
 <table class="table table-action table-striped table-bordered table-hover">

 // meu código aqui

 </table>
</div>

Mas esta forma de responsividade não se aplica a minha necessidade porque olha como fica o select para ser selecionado... Ele corta no scroll e ai fica pior do que sem responsividade para selecionar.

/applications/core/interface/imageproxy/imageproxy.php?img=https://uploaddeimagens.com.br/images/000/609/332/original/table-boot.jpg?1461683400&key=2d5e0f55a03abc267a99a1e30d9ded569f4e8932326a6d0682e749751adbf44b" alt="table-boot.jpg?1461683400" />

https://css-tricks.com/responsive-data-tables/

Vou testar e jájá posto o resultado amigo

L. Henrique· 26 de abr.

Doug,

Você pode fazer o seguinte, adicionar um título para cada select com uma label. Enquanto não for 450px, por exemplo, o label recebe display none. Depois os headers recebem display none e o label recebe display block.

Veja aqui a DEMO para a solução do seu problema. Eu só adicionei uma div com o título e ai fica a seu critério estilizar e etc...

Essa é uma boa solução até então, já que isso vai evitar de você ter que fazer 100 linhas de CSS para fazer 10 no máximo.

Boa sorte e bons estudos!

DougCoder· 27 de abr.

>
Doug,

Veja aqui a DEMO para a solução do seu problema. Eu só adicionei uma div com o título e ai fica a seu critério estilizar e etc...

Essa é uma boa solução até então, já que isso vai evitar de você ter que fazer 100 linhas de CSS para fazer 10 no máximo.

Boa sorte e bons estudos!

Opa amigo !!!

Funcionou certinho, fiz uma minúscula edição no seu CSS alterando a div para #hr e atribui na div da tabela o id="hr" pois eu tinha mais divs na página e elas não eram apresentadas. Só isso, funcionou a divisão vertical muito bem. Parabéns e muito obrigado.

Estou agora enfrentando aquele outro probleminha que está na imagem que postei no post #6. A primeira imagem do tópico onde por exemplo, seu CSS faz a divisão em 450px, posso até aumentar um pouco que fica bom. Mas próximo a 800px ~~ 1150px por exemplo, a tabela continua não responsiva.

Estou tentando aplicar a sua mesma lógica para "dividir" a tabela... Tipo, acho que seria a única solução mais viável. Quando ela estourar uma certa quantidade de tamanho em 'px', ele dividir a tabela em 2 linhas. Ou seja, ficando da seguinte forma:

@media 900px (exemplo)

[ Nome da Obra | Autores | Temas ]

[ Editoras | Disciplinas | Palavras Chave | Tipo de Arquivo ]

OBS: Imagine os headers +/- centralizados...

Teria que ter alguma outra técnica / elemento do CSS para fazer esta divisão na <table> ?

L. Henrique· 27 de abr.

Doug,

Tabelas funcionam assim mesmo, quando a quantidade for maior do que o display, ele vai quebrar ou atravessar a página inteira. Nesse caso não seria viável usar o responsive do Bootstrap? Ou pelo menos simular ele num media query?

Essa é a solução mais prática que consegui pensar pra agora. Caso não seja isso que queira, me avise que tento achar outra solução.

Abraços e fico feliz por ter conseguido te ajudar!

DougCoder· 27 de abr.

>
Doug,

Essa é a solução mais prática que consegui pensar pra agora. Caso não seja isso que queira, me avise que tento achar outra solução.

Abraços e fico feliz por ter conseguido te ajudar!

Então... O responsive do bootstrap que você diz é o mesmo que eu citei alguns posts acima e mostrei na imagem? (segui o exemplo do boostrap responsive com base no w3school do link)

Se for... acontece que ele pega e "cria" o scroll vertical e horizontal ao redor da tabela... Tudo bem isto atenderia se a tabela não tivesse um select, pelo seguinte motivo: Se eu coloco este scroll, quando clico no combobox ele desce as opções e isso fica dentro do componente <div> com a responsividade do boostrap, ou seja, sempre que eu clico em um select eu tenho que descer o scroll em uma tela minúscula (do tamanho de 3 dedos) que é a altura da minha tabela.

Eu mostrei isso la no post #9 o jeito que ficou e tipo... Sem usar dessa forma acho que a única maneira seria dividir a tabela mesmo pq daí ela se ajusta ao tamanho ideal em todos os pixels possíveis.

Ficaria em 3 partes:

Full tela = tabela normal.

mid tela, ou médio pixels = tabela dividida

480px ou inferior = tabela vertical com o css q vc demonstrou.

L. Henrique· 28 de abr.

Doug,

Você pode criar uma outra tabela com a classe hidden-lg (propriedade do Bootstrap) e deixar que ela só apareça quando fica em md. O ruim disso é que o browser vai ter que ler mais código desnecessariamente. Sem contar que o código PHP (ou o que você estiver utilizando pra pesquisa do livro) terá que aumentar também por conta das novas id's / classes.

Tente fazer como falou e poste aqui o resultado.

Abraços!

DougCoder· 1 de mai.

>
Doug,

Tente fazer como falou e poste aqui o resultado.

Abraços!

Tentarei em breve amigo...

Não me atentei a uma funcionalidade do sistema e preciso desenvolvê-la o mais rápido possível... Tive que abandonar o CSS no momento, assim que eu conseguir fazer eu volto aqui e informo, obrigado!