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>