HTML/CSS：响应 table

Question

我的 wordpress 端有这样一个 table：

.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>

不幸的是，这不适合较小的移动屏幕，因此我想将此 table 更改为具有 HTML/CSS 的响应式 table。我在网上找到了很多例子，可惜没有比这更合适的了。我想在移动设备上显示这样的 table：

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

不知何故需要取一列并将其用作下面的一行。

有人可以提供代码片段吗？谢谢和亲切的问候 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>

较小的屏幕：

HTML/CSS：响应 table

HTML/CSS: Responsive table

html

css

mobile

html-table

responsive-design