Tenho uma tabela em HTML usando Bootstrap:
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:
Mas gostaria que ficasse assim:
E quando clicasse somente no + ficasse dessa maneira:
Tem com fazer com bootstrap ou javascript?