HTML / CSS：响应表[重复]

Question

我的 wordpress 端有一张这样的表格：

.center {
  margin-left: auto;
  margin-right: auto;
}

.text-center-row>th,
.text-center-row>td {
  text-align: center;
}

<table style="border: none;" class="center">
  <tbody>
    <tr class="text-center-row">
      <td style="border: none;">Icon 1</td>
      <td style="border: none;">Icon 2</td>
      <td style="border: none;">Icon 3</td>
      <td style="border: none;">Icon 4</td>
    </tr>
    <tr class="text-center-row">
      <td style="border: none;">Text with Link 1</td>
      <td style="border: none;">Text with Link 2</td>
      <td style="border: none;">Text with Link 3</td>
      <td style="border: none;">Text with Link 4</td>
    </tr>
  </tbody>
</table>

不幸的是，这不适合较小的移动屏幕，所以我想将此表格更改为带有 HTML/CSS 的响应式表格。我在互联网上找到了很多例子，但不幸的是没有一个更合适。我想在移动视图上有这样的表格：

  Icon 1
Text&Link 1
  Icon 2
Text&Link 2
  Icon 3
Text&Link 3
  Icon 4
Text&Link 4

以某种方式需要获取一列并将其用作下面的一行。

有人可以帮忙写一个代码 sn-p 吗？ 谢谢和亲切的问候 NKL

Answer 1

使用 DIVS

.center {
  margin-left: auto;
  margin-right: auto;
}

.text-center {
  text-align: center;
}

#iconContainer { text-align:center;  width: 100vw; }
#iconContainer div { display:inline-block; padding: 0 5px 0 5px; }

<div id="iconContainer">
<div class="text-center">Icon 1<br/>Text with Link 1</div>
<div class="text-center">Icon 2<br/>Text with Link 2</div>
<div class="text-center">Icon 3<br/>Text with Link 3</div>
<div class="text-center">Icon 4<br/>Text with Link 4</div>
<div class="text-center">Icon 5<br/>Text with Link 5</div>
</div>

小屏幕：