时间戳

首页 > 解决方案 > 响应式表格 - 如何在表格中下拉而不是侧身

html - 响应式表格 - 如何在表格中下拉而不是侧身

问题描述

我想创建一个响应表。当我使用手机屏幕打开页面时，我希望<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>

这张桌子我想要什么

标签： htmlcsshtml-tableresponsive

解决方案

只需应用 cssdisplay: 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>

推荐阅读