如何在移动视图中旋转响应式表格

Question

我有一个博客网站。上面有一个 html 表格（主页）。 在移动视图中，我想看到如下所示的表格（附图片）。请告诉我该怎么做（最终输出）。我对 CSS 不太流利。

我的 HTML 表格：

<table border="1" cellspacing="1" style="width: 100%px;">
<tbody>
<tr>
<td>
<a href="" target="_blank">
<img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title=""/></a>
</td>
<td>
<a href="" target="_blank">
<img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title=""/></a>
</td>
<td>
<a href="" target="_blank">
<img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title=""/></a>
</td>
</tr>
</tbody> 
</table>

我尝试过 html 编码，但我没有正确的 CSS 知识

Answer 1

在这里，使用

CSS-grids

将是一个好主意。

检查这个例子：

.grid-container {
  display: grid;
  gap: 1px;
  width: 100%;
}

.grid-container>a {
  border: 1px solid black;
  box-sizing: border-box;
}

.grid-container>a>img {
  display: block;
  width: 100%;
  height: auto;
}


/* For large screens */

@media only screen and (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

<div class="grid-container">
  <a href="" target="_blank">
    <img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title="" />
  </a>
  <a href="" target="_blank">
    <img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title="" />
  </a>
  <a href="" target="_blank">
    <img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title="" />
  </a>
</div>