WordPress站点响应式表格设计咨询：移动端表单列下移实现方案

DevOps 小满

2026-9-23

方案1：改用DIV+Flex响应式布局（更推荐，适配性更好）

第一步：替换原有HTML结构

把你当前的整段table代码替换为下面的结构：

<div class="content-wrapper">
  <div class="text-col">
    <h2>Checkkrediter - Ett alternativ till traditionella företagslån</h2>
    <p>På Check-kredit.se kan du jämföra olika typer av checkkrediter och företagslån. Checkkredit, även kallat checkräkningskredit, är ett snabbt & smidigt alternativ istället för företagslån där företaget endast betalar ränta på utnyttjat belopp.</p>
  </div>
  <div class="form-col">
    [everest_form id="926"]
  </div>
</div>

第二步：添加响应式CSS

登录WordPress后台，依次进入「外观」-「自定义」-「额外CSS」，粘贴以下代码后保存即可生效：

/* 桌面端样式：左右两列排布 */
.content-wrapper {
  display: flex;
  gap: 30px; /* 两列之间的间距，可自行调整数值 */
  width: 100%;
  align-items: flex-start;
}
.text-col, .form-col {
  flex: 1; /* 两列默认等宽，如需文本列更宽可修改为 flex: 1.5 自行调整比例 */
}
/* 移动端小于768px时切换为上下排布 */
@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }
}

说明：768px为响应式断点，你可以根据自身需求调整这个数值，数值越大，触发上下排布的屏幕尺寸阈值越高。

方案2：不修改现有table结构，仅用CSS兼容

如果你暂时不想改动现有HTML代码，可以直接在「额外CSS」中添加以下代码，强制小屏下表格元素转为块级实现上下排布：

@media (max-width: 768px) {
  table, tbody, tr, td {
    display: block !important;
    width: 100% !important;
  }
  /* 调整文本和表单的上下间距，避免挤在一起 */
  table td:first-child {
    margin-bottom: 20px;
  }
}