1

Tenho uma tabela em HTML usando Bootstrap:

inserir a descrição da imagem aqui

Com o código em CSS abaixo consigo que ela oculte campos automaticamente as 3 ultimas colunas quando a página é redimensionada para uma resolução de de 600(largura):

<style>
    @media screen and (max-width: 600px) {
        table th:nth-child(3),table th:nth-child(4),table th:nth-child(5) {
            display: none;
        }
        table td:nth-child(3),table td:nth-child(4),table td:nth-child(5) {
            display: none;
        }
    }
</style>

Ficando assim:

inserir a descrição da imagem aqui

Mas gostaria que ficasse assim:

inserir a descrição da imagem aqui

E quando clicasse somente no + ficasse dessa maneira:

inserir a descrição da imagem aqui

Tem com fazer com bootstrap ou javascript?

6
  • Acredito que você vá conseguir fazer isso com javascript. Porque o Bootstrap até onde eu sei não trabalha com evento de clique. 18/07/2017 às 14:29
  • @DiemanoNóbrega Pode ser em javascript mesmo 18/07/2017 às 14:38
  • @DiemanoNóbrega, o Bootstrap é uma biblioteca que utiliza o JQuery, que é uma biblioteca para javascript 18/07/2017 às 20:38
  • @GleysonSilva, creio que não será possível da forma como você está querendo, o que se pode fazer é, criar um modal, que ao clicar em cima do botão de "+" trará em si uma cópia dos dados ocultos da tabela 18/07/2017 às 20:39
  • 1
    @MuriloGambôa boa idéia vou tentar assim, porém, pensei na outra maneira por achar ser mais fácil de implementar, claro, se houvesse uma maneira dele mudar a tabela sem eu ter que fazer código para cada tabela que eu tiver no sistema. 18/07/2017 às 23:42

1 Resposta 1

1

Este tipo de comportamento acredito que seja melhor utilizar javascript ou AngularJS. Com Angular você pode criar esse tipo de comportamento e reutilizar de maneira mais rápida.

4
  • Se possível gostaria de usar javascript, mas senão, pode ser Angular mesmo, você poderia postar um exemplo ou indicar algum site? 18/07/2017 às 23:56
  • acredito que esse video possa te dar uma ideia de como resolver este problema: youtube.com/watch?v=t9bw7vWSKVE 18/07/2017 às 23:59
  • obrigado pela ajuda, mas como não vi nada de AngularJs e o projeto não utiliza esse Framework, não achei uma boa ideia utiliza-lo apenas para esse fim. Vou continuar buscando como fazer em CSS e/ou Javascript. 19/07/2017 às 0:56
  • 1
    depois de analisar o angular 2.0 vi que é mais proveitoso eu investir nele do que continuar com Javascript, Jquery, Bootstrap sem usar um Framework. 22/07/2017 às 1:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .