响应式表-如何在表中下拉而不是横向放置

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>