Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

@media para o display de uma tabela

Referente ao curso JavaScript: programando na linguagem da web

por FLÁVIO JOSÉ DOS PASSOS
| 403k xp | 77 posts

Estou criando praticando as atividades propostas e tentando montar as media queries, porem não estou conseguindo fazer o elemento reaparecer nas resoluções de tela acima de 400 px.

<tr>
    <td class="num">1</td>
    <td class="nome">Flávio</td>
    <td class="peso">92</td>
    <td class="altura">1.82</td>
    <td class="imc">27.5</td>
</tr>

----------------------

@media screen and (min-width: 400px) {
    .num, .peso, .altura {
        display: none;
    }

@media screen and (min-width: 768px) {
    .num, .peso, .altura {
        display: ????;
    }

Não sei que propriedade usar para retornar o elemento visível, pois como estou usando tabela se colocar inline ou inline-block quebra a tabela.

2 respostas
solução!
por Carlos Vitor
| 174.4k xp | 60 posts

Flávio,

pesquisei e existem vários valores que podem ser passados para o display, seguem os valores para você testar.

inline, block, flex, inline-block, inline-flex, inline-table, list-item, run-in, table table-caption, table-column-group, table-header-group, table-footer-group, table-row-group table-cell, table-column, table-row, none, initial, inherit

por FLÁVIO JOSÉ DOS PASSOS
| 403k xp | 77 posts

Valeu, funcionou perfeita mente com a seguinte configuração.

@media screen and (min-width: 768px) {
    .num, .nome, .peso, .altura, .imc {
        display: table-cell;    
    }
}

@media screen and (min-width: 400px) {
    .num, .peso, .altura {
        display: none;
    }
}