title: RESPONSIVE TABLE - How To Make <td> In The Table Drop Down Instead Of Sideways
body: <p>I want to create a responsive table. When I open the page using the mobile screen, I want <code>&lt;td&gt;</code> in the table to automatically go down. So, there should be two columns sideways, but when opening using a mobile display, the two columns will go down.</p>
  
  <p>This is the HTML code that I made:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
   border-collapse: collapse;
  }
  table td {
    border: 1px solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="kotak_artikel"&gt;
    &lt;table id="isikotak_artikel"&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;img src="https://dummyimage.com/200x160/000/fff" /&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;h2 class="judulartikel"&gt;Title 1&lt;/h2&gt;
          &lt;p class="penjelasan_judulartikel"&gt;Content 1&lt;/p&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;img src="https://dummyimage.com/200x160/000/fff" /&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;h2 class="judulartikel"&gt;Title 2&lt;/h2&gt;
          &lt;p class="penjelasan_judulartikel"&gt;Content 2&lt;/p&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;img src="https://dummyimage.com/200x160/000/fff" /&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;h2 class="judulartikel"&gt;Title 3&lt;/h2&gt;
          &lt;p class="penjelasan_judulartikel"&gt;Content 3&lt;/p&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;img src="https://dummyimage.com/200x160/000/fff" /&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;h2 class="judulartikel"&gt;Title 4&lt;/h2&gt;
          &lt;p class="penjelasan_judulartikel"&gt;Content 4&lt;/p&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;img src="https://dummyimage.com/200x160/000/fff" /&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;h2 class="judulartikel"&gt;Title 5&lt;/h2&gt;
          &lt;p class="penjelasan_judulartikel"&gt;Content 5&lt;/p&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><img src="https://i.stack.imgur.com/wEXJT.png" alt="this table what I want"></p>