如何在Blogger网站移动端视图中调整响应式表格布局

需求说明 #

我在Blogger网站首页放置了一个HTML表格，里面是一行三列的图片链接，希望在移动端访问时，这些图片能垂直堆叠显示（替代原有的横向排列），但我对CSS不熟悉，需要具体的实现方法和完整代码。

实现思路 #

通过CSS媒体查询针对移动端屏幕（宽度≤768px）调整表格布局：将表格行和单元格改为块级元素，让图片自动垂直排列；同时设置图片自适应屏幕宽度，保证移动端显示美观。

完整代码 #

直接将以下代码替换你原有的表格代码，粘贴到Blogger页面编辑器即可：

<style>
/* 全局表格基础样式 */
.image-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.image-table td {
  border: 1px solid #ccc; /* 可选边框，不需要可删除此行 */
  padding: 5px;
  text-align: center;
}
.image-table img {
  width: 100%;
  height: auto; /* 保持图片比例自适应 */
  display: block;
}

/* 移动端适配规则：屏幕宽度≤768px时生效 */
@media (max-width: 768px) {
  .image-table tr {
    display: block;
    margin-bottom: 10px;
  }
  .image-table td {
    display: block;
    width: 100%;
  }
}
</style>

<table class="image-table">
  <tbody>
    <tr>
      <td>
        <a href="" target="_blank">
          <img alt="" src="https://hiru.lk/8Ds0Tf" title="" /></a>
      </td>
      <td>
        <a href="" target="_blank">
          <img alt="" src="https://hiru.lk/8Ds0Tf" title="" /></a>
      </td>
      <td>
        <a href="" target="_blank">
          <img alt="" src="https://hiru.lk/8Ds0Tf" title="" /></a>
      </td>
    </tr>
  </tbody>
</table>

可选调整 #

1. 将代码中的href=""替换为你的实际跳转链接
2. 若不需要表格边框，删除.image-table td中的border: 1px solid #ccc;代码
3. 可修改媒体查询的max-width:768px数值，适配不同尺寸的移动端屏幕

内容的提问来源于stack exchange，提问作者Banana Man