Wie man eine zweispaltige Tabelle reaktionsfähig macht, wobei die zweite Spalte unter die erste geht?

Question

Ich erstelle eine Website mit einem Online-Editor. Ich habe eine einfache Tabelle mit zwei Spalten und einer Zeile. Auf dem Desktop sieht es gut aus, aber auf dem Handy muss ich nach links und rechts scrollen, um den Inhalt zu sehen.

Ich möchte es reaktionsfähig machen mit der zweiten Spalte gehen unter der ersten auf dem kleinen Bildschirm.

Hier ist mein 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>

So auf diesem Beispiel möchte ich den Textteil unter dem Bild auf kleinen Bildschirm haben,. Wie kann ich das bitte tun?

Danke euch allen!

Answer 1

Sie sollten keine Tabellen dafür verwenden. Tabellen sind in der Verantwortung sehr unbequem.

Verwenden Sie das CSS-Grid-Layout dafür. In meinem Beispiel versuchen Sie, die Größe des Bildschirms zu ändern. Wenn es eng wird, bewegen sich die Spalten untereinander. Wenn das Fenster relativ breit ist, können Sie sie nebeneinander sehen.

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

können Sie eine Medien Abfrage verwenden, in dem Sie display: block; width: 100%; height: auto; zu table, tr und td gelten. Auf diese Weise machen Sie alle regulären Blockelemente, in denen die td s untereinander fließen.

Legen Sie den Haltepunkt wie gewünscht fest. In meinem Ausschnitt habe ich es auf 600px eingestellt;

Und versuchen Sie, Inline-Stile zu vermeiden. Wenn Sie Medienanfragen verwenden möchten, sind sie wirklich in die Quere ...

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>