RESPONSIVE TABLE - Как сделать <td>в таблице выпадающим вместо бокового

Question

Я хочу создать адаптивную таблицу. Когда я открываю страницу с помощью экрана мобильного устройства, я хочу, чтобы значение <td> в таблице автоматически уменьшалось. Таким образом, должно быть два столбца сбоку, но при открытии с помощью мобильного дисплея эти два столбца уменьшатся.

Это HTML-код, который я сделал:

table {
	border-collapse: collapse;
}
table td {
  border: 1px solid;
}

<div class="kotak_artikel">
  <table id="isikotak_artikel">
    <tr>
      <td>
        <img src="https://dummyimage.com/200x160/000/fff" />
      </td>
      <td>
        <h2 class="judulartikel">Title 1</h2>
        <p class="penjelasan_judulartikel">Content 1</p>
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://dummyimage.com/200x160/000/fff" />
      </td>
      <td>
        <h2 class="judulartikel">Title 2</h2>
        <p class="penjelasan_judulartikel">Content 2</p>
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://dummyimage.com/200x160/000/fff" />
      </td>
      <td>
        <h2 class="judulartikel">Title 3</h2>
        <p class="penjelasan_judulartikel">Content 3</p>
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://dummyimage.com/200x160/000/fff" />
      </td>
      <td>
        <h2 class="judulartikel">Title 4</h2>
        <p class="penjelasan_judulartikel">Content 4</p>
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://dummyimage.com/200x160/000/fff" />
      </td>
      <td>
        <h2 class="judulartikel">Title 5</h2>
        <p class="penjelasan_judulartikel">Content 5</p>
      </td>
    </tr>
  </table>
</div>

Answer 1

Просто применить css display: block; к <td> будет сделано.

table {
	border-collapse: collapse;
}
table td {
  border: 1px solid;
}

table#isikotak_artikel tr td {
  display: block;
}

<div class="kotak_artikel">
  <table id="isikotak_artikel">
    <tr>
      <td>
        <img src="https://dummyimage.com/200x160/000/fff" />
      </td>
      <td>
        <h2 class="judulartikel">Title 1</h2>
        <p class="penjelasan_judulartikel">Content 1</p>
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://dummyimage.com/200x160/000/fff" />
      </td>
      <td>
        <h2 class="judulartikel">Title 2</h2>
        <p class="penjelasan_judulartikel">Content 2</p>
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://dummyimage.com/200x160/000/fff" />
      </td>
      <td>
        <h2 class="judulartikel">Title 3</h2>
        <p class="penjelasan_judulartikel">Content 3</p>
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://dummyimage.com/200x160/000/fff" />
      </td>
      <td>
        <h2 class="judulartikel">Title 4</h2>
        <p class="penjelasan_judulartikel">Content 4</p>
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://dummyimage.com/200x160/000/fff" />
      </td>
      <td>
        <h2 class="judulartikel">Title 5</h2>
        <p class="penjelasan_judulartikel">Content 5</p>
      </td>
    </tr>
  </table>
</div>