Comment rendre une table à deux colonnes réactive avec la deuxième colonne qui passe sous la première?

Question

Je crée un site web en utilisant un éditeur en ligne. J'ai une table simple avec deux colonnes et une rangée. Sur le bureau, ça a l'air génial, mais sur mobile, je dois faire défiler vers la gauche et la droite pour voir le contenu.

Je voudrais le rendre réactif avec la deuxième colonne en vertu de la première sur un petit écran.

Voici mon code:

<div style="overflow-x: auto;"> 
 
    <table style="height: 452px; width: 821px; margin-left: auto; margin-right: auto;"> 
 
    <tbody> 
 
     <tr style="height: 143.6px;"> 
 
     <td style="width: 280px; height: 143.6px;"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></td> 
 
     <td style="width: 439px; height: 143.6px;"> 
 
      <h3 style="text-align: left;"><span style="color: #333333;"><b>It all starts with a test</b></span></h3> 
 
      <br /> 
 
      <p style="line-height: 1.6; text-align: left;"><span style="color: #333333; font-size: large;">This is an example. This is an example. Testing and testing again.</span></p> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Donc cet exemple, je voudrais avoir la partie de texte en passant sous l'image sur petit écran. Comment puis-je faire ça s'il vous plait?

Merci à tous!

Answer 1

Vous ne devriez pas utiliser de tables pour cela. Les tableaux sont chose très gênant dans les termes de responsabilité.

Utilisez la disposition de grille CSS pour cela. Dans mon exemple, essayez de redimensionner l'écran. Quand il devient étroit, les colonnes se déplacent l'une sous l'autre. Lorsque la fenêtre est relativement large, vous pouvez les voir côte à côte.

https://jsfiddle.net/33fLLdzr/1/

<div class="wrapper"> 
    <div class="box sidebar"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></div> 
    <div class="box sidebar2"> 
     <h3 style="text-align: left;">It all starts with a test</h3> 
     <p style="line-height: 1.6; text-align: left;">This is an example. This is an example. Testing and testing again.</p> 
    </div> 
</div> 

<style> 
body { 
    margin: 40px; 
} 

.sidebar { 
    grid-area: sidebar; 
} 

.sidebar2 { 
    grid-area: sidebar2; 
} 

.wrapper { 
    background-color: #fff; 
    color: #444; 
} 

.wrapper { 
    display: grid; 
    grid-template-areas: 
     "sidebar" 
     "sidebar2" 
} 

@media only screen and (min-width: 600px) { 
    .wrapper { 
     grid-template-columns: 50% 50%; 
     grid-template-areas: 
     "sidebar sidebar2" 
    } 
} 
</style> 

Answer 2

Vous pouvez utiliser une requête média dans lequel vous appliquez display: block; width: 100%; height: auto; à table, tr et td. De cette façon, vous en faites tous les éléments de bloc réguliers où les td vont s'écouler les uns sous les autres.

Définissez le point d'arrêt comme vous le souhaitez. Dans mon extrait, je l'ai mis à 600px;

Et essayez d'éviter les styles en ligne. Si vous souhaitez utiliser des requêtes des médias, ils sont vraiment sur votre chemin ...

html, body { 
 
margin: 0; 
 
} 
 
table { 
 
    height: 452px; 
 
    width: 821px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
tr { 
 
height: 143.6px; 
 
} 
 
td.x { 
 
    width: 280px; 
 
    height: 143.6px; 
 
} 
 

 
td.y { 
 
    width: 439px; 
 
    height: 143.6px; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    table, 
 
    tr, 
 
    td.x, 
 
    td.y { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    } 
 
}

<div style="overflow-x: auto;"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td class="x"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></td> 
 
     <td class="y"> 
 
      <h3 style="text-align: left;"><span style="color: #333333;"><b>It all starts with a test</b></span></h3> 
 
      <br /> 
 
      <p style="line-height: 1.6; text-align: left;"><span style="color: #333333; font-size: large;">This is an example. This is an example. Testing and testing again.</span></p> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 3

<html> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 

 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    </head> 
 
    <body> 
 
     <img class="aligncenter wp-image-4684" src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /> 
 
     
 
<a href="http://scotiafishing.com/wp-content/uploads/Best-Of-Scotland-Package.pdf" rel="">This is an example. This is an example. Testing and testing again.</a> 
 

 
    </body> 
 
</html> 
 

 
    
 
    
 
    
 

voudriez-vous quelque chose comme ça?