3

O codigo do site no computador está ok, mas no mobilie as colunas estão muito finas e com a visibilidade muito ruim, tentei resolver de varias formas a responsibilidade no celular e só consegui usando o comando overflow, mas gostaria de saber como faço para deixar com 2 colunas e 2 linhas a tabela apenas no mobile usando apenas a linguagem html.

Imagem de como a tabela está no computador

Tabela no celular

<h2 style="color: #ffffff; text-align: center;">NOSSOS DIFERENCIAIS</h2>
<div style="overflow-y: auto; width: auto;">
<table class="container" style="width: 810; background-color: rgba(0, 0, 0, 0.8);" border="0" rules="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="width: 180px; min-width: 70px;"><strong><span style="color: #ffffff;"> Horários flexíveis: </span></strong>
<span style="color: #ffffff;"> Professores disponíveis a qualquer horário do dia, de forma a nós ajustar a sua realidade.</span></td>
<td style="width: 240px; min-width: 70px;"><strong><span style="color: #ffffff;"> Professores nativos: </span></strong>
<span style="color: #ffffff;">Temos uma equipe de professores nascidos e formados na área pedagógica procedentes de vários países da Espanha.</span></td>
<td style="width: 200px; min-width: 70px;"><strong><span style="color: #ffffff;"> Nivelamento Online:</span></strong>
<span style="color: #ffffff;"> Teste seu espanhol online. Receberá seus resultados e uma proposta de aula, sem compromisso.</span></td>
<td style="width: 170px; min-width: 70px;"><strong><span style="color: #ffffff;"> Sem taxas:</span></strong>
<span style="color: #ffffff;"> Não temos contrato fidelidade e não cobramos taxa de matrícula.</span></td>
</tr>
</tbody>
</table>
</div>

3
  • Vc realmente precisa usar uma tabela para construir esse elemento ou pode ser feito com Divs?
    – hugocsl
    Commented 6/07/2018 às 10:36
  • Isabela eu coloquei um EDIT na minha resposta, da uma olhada lá que eu explico como vc tem que usar o CSS para funcionar direitinho. Se vc fizer isso e continuar não funcionando ai vou pedir pra vc editar essa sua pergunta e colocar o seu código completo do HTML e CSS, pois não há motivos para não estar funcionando, testei aqui e em outros browsers e está tudo 100%....
    – hugocsl
    Commented 6/07/2018 às 16:26
  • Isabela que bom que minha resposta te ajudou, se a sua dúvida já foi respondida considere marcar uma resposta como aceita, nesse ícone ✔ a lado da resposta que vc usou, assim a pergunta não fica pendente no site como "Pergunta sem Reposta Aceita". Boa sorte com o projeto qq outra dúvida é só postar que sempre tem alguém para ajudar.
    – hugocsl
    Commented 7/07/2018 às 0:30

2 Respostas 2

1

Vc pode usar display:none / display:table junto de uma regra simples de @media screen and (max-width: 768px) { } para mostra e esconder <tr> da tabela dependendo da largura da tela.

Veja o exemplo abaixo para entender melhor. Repare que as duas últimas <tr> fica com diplay:none, elas só aparecem quando a tela é menor que 768px, ao mesmo passo que eu escondo a primeira <tr> quando a tela é menor que 768pxe só mostro quando é maior que 768px.

EDIT

Vc precisa colocar essas classes dentro do <head> do seu documento e dentro da tag <style> para funcionar direito. Não sei como vc está fazendo ai, mas esse CSS com classes tem que estar no início do documento como no exemplo abaixo. Deixei uns comentários no código para vc entender o que é cada tipo de uso de CSS. OBS: tudo que está dentro da regra @media screen and (max-width: 768px) { seu css } deve ser a última parte do seu CSS, então rola o seu .css até o final e coloca essa parte do código lá. Qualquer dúvida é só falar

Execute o código para entender melhor e abra tanto com a tela pequena quanto em "Página toda" OBS: Deixei a borda apenas para vc visualizar melhor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- link com css externo -->
    <link rel="stylesheet" href="style.css"> 
    
    <!--css interno contruido dento das tags style -->
<style>
    .tr-min {
    display:none;
}
@media screen and (max-width: 768px) {
    .tr-max {
        display:none;
    }
    .tr-min {
        display:table;
    }
}
</style>
</head>
<body>
    
    
    <h2 style="color: #ffffff; text-align: center;">NOSSOS DIFERENCIAIS</h2>
    <!-- css "inline" escrito direto na tag html no atributo style="" -->
    <div style="overflow-y: auto; width: auto;">
        <table class="container" style="width: 810; background-color: rgba(0, 0, 0, 0.8);" border="1px" rules="0" cellspacing="0" cellpadding="0"
            align="center">
            <tbody>
                <tr class="tr-max">
                    <td style="width: 180px; min-width: 70px;">
                        <strong>
                            <span style="color: #ffffff;"> Horários flexíveis: </span>
                        </strong>
                        <span style="color: #ffffff;"> Professores disponíveis a qualquer horário do dia, de forma a nós ajustar a sua realidade.</span>
                    </td>
                    <td style="width: 240px; min-width: 70px;">
                        <strong>
                            <span style="color: #ffffff;"> Professores nativos: </span>
                        </strong>
                        <span style="color: #ffffff;">Temos uma equipe de professores nascidos e formados na área pedagógica procedentes de vários países
                            da Espanha.</span>
                    </td>
                    <td style="width: 200px; min-width: 70px;">
                        <strong>
                            <span style="color: #ffffff;"> Nivelamento Online:</span>
                        </strong>
                        <span style="color: #ffffff;"> Teste seu espanhol online. Receberá seus resultados e uma proposta de aula, sem compromisso.</span>
                    </td>
                    <td style="width: 170px; min-width: 70px;">
                        <strong>
                            <span style="color: #ffffff;"> Sem taxas:</span>
                        </strong>
                        <span style="color: #ffffff;"> Não temos contrato fidelidade e não cobramos taxa de matrícula.</span>
                    </td>
                </tr>
                <tr class="tr-min">
                    <td style="width: 50%; min-width: 70px;">
                        <strong>
                            <span style="color: #ffffff;"> Horários flexíveis: </span>
                        </strong>
                        <span style="color: #ffffff;"> Professores disponíveis a qualquer horário do dia, de forma a nós ajustar a sua realidade.</span>
                    </td>
                    <td style="width: 50%; min-width: 70px;">
                        <strong>
                            <span style="color: #ffffff;"> Professores nativos: </span>
                        </strong>
                        <span style="color: #ffffff;">Temos uma equipe de professores nascidos e formados na área pedagógica procedentes de vários países
                            da Espanha.</span>
                    </td>
                </tr>
                <tr class="tr-min">
                    <td style="width: 50%; min-width: 70px;">
                        <strong>
                            <span style="color: #ffffff;"> Nivelamento Online:</span>
                        </strong>
                        <span style="color: #ffffff;"> Teste seu espanhol online. Receberá seus resultados e uma proposta de aula, sem compromisso.</span>
                    </td>
                    <td style="width: 50%; min-width: 70px;">
                        <strong>
                            <span style="color: #ffffff;"> Sem taxas:</span>
                        </strong>
                        <span style="color: #ffffff;"> Não temos contrato fidelidade e não cobramos taxa de matrícula.</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    
</body>
</html>

-1

A minha solução seria tu usar porcentagem. Primeiro defini a table com tamanho 100%. Depois defini um tamanho de 50% e descontando 15px das margins.

Isso tudo tu defini somente para quando for mobile.

<h2 style="color: #ffffff; text-align: center;">NOSSOS DIFERENCIAIS</h2>
<div style="overflow-y: auto; width: auto;">
  <table class="container" style="width: 100%; background-color: rgba(0, 0, 0, 0.8);" border="0" rules="0" cellspacing="0" cellpadding="0" align="center">
    <tbody>
      <tr>
        <td style="width: calc(50% - 15px);margin: 5px;float: left;"><strong><span style="color: #ffffff;"> Horários flexíveis: </span></strong>
          <span style="color: #ffffff;"> Professores disponíveis a qualquer horário do dia, de forma a nós ajustar a sua realidade.</span></td>
        <td style="width: calc(50% - 15px);margin: 5px;float: left;"><strong><span style="color: #ffffff;"> Professores nativos: </span></strong>
          <span style="color: #ffffff;">Temos uma equipe de professores nascidos e formados na área pedagógica procedentes de vários países da Espanha.</span></td>
        <td style="width: calc(50% - 15px);margin: 5px;float: left;"><strong><span style="color: #ffffff;"> Nivelamento Online:</span></strong>
          <span style="color: #ffffff;"> Teste seu espanhol online. Receberá seus resultados e uma proposta de aula, sem compromisso.</span></td>
        <td style="width: calc(50% - 15px);margin: 5px;float: left;"><strong><span style="color: #ffffff;"> Sem taxas:</span></strong>
          <span style="color: #ffffff;"> Não temos contrato fidelidade e não cobramos taxa de matrícula.</span></td>
      </tr>
    </tbody>
  </table>
</div>

5
  • Lucas mas ela quer que a tabela tenha 4 colunas na tela grande, e 2 em telas mobile... do jeito que vc fez ela sempre vai ficar com 2 colunas independente do tamanho da tela. De uma relida na pergunta...
    – hugocsl
    Commented 6/07/2018 às 13:18
  • De uma relida na minha resposta. Por isso comentei: "Isso tudo tu defini somente para quando for mobile." Commented 6/07/2018 às 14:20
  • Entendi, e como vc consegue alterar o style=" " que está inline direto na tag de acordo com o tamanho da tela?
    – hugocsl
    Commented 6/07/2018 às 14:25
  • Lucas consegui resolver com o código do hugocsl, mas obrigada pela ajuda, precisava mesmo era de ajustar a versão do mobile diferente da versão do pc, como o hugo havia falado.
    – Isabela
    Commented 6/07/2018 às 18:39
  • Eu entendo hugo mas ele pediu usando apenas programação html. Commented 6/07/2018 às 23:26

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 .