如何使用CSS实现table表格移动端响应式列宽布局调整

问题根因 #

• column-width 是CSS多列布局专属属性，无法用于控制table单元格宽度，原代码的宽度设置完全无效
• 图片写死了固定像素宽度，窄屏移动端下会直接溢出容器，挤压相邻单元格空间
• 未给单元格设置固定宽度占比，table会自动根据内容多少分配宽度，自然无法实现预期的分散排布效果

解决方案（无需修改原有HTML结构，仅调整CSS即可生效） #

修改后的完整CSS代码如下：

.fiftyFiftySection {
  background-color: #000;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
}
/* 重置表格基础样式，让表格占满父容器宽度 */
.fiftyFiftySection table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 开启固定列宽模式，列宽按设置比例分配，不受内容长度影响 */
}
.odometer {
  font-size: 3em;
  text-align: right;
  color: #fff;
}
table td {
  width: 50%; /* 两个单元格各占一半宽度 */
  padding: 8px;
  box-sizing: border-box;
}
/* 左侧单元格内容左对齐 */
table td:first-child {
  text-align: left;
}
/* 右侧单元格内容右对齐 */
table td:last-child {
  text-align: right;
}
/* 图片做响应式处理，永远不超出所在单元格宽度 */
table td img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 500px) {
  .odometer {
    font-size: 2em; /* 移动端缩小计数器字号，避免数字过长溢出 */
  }
}

调整后桌面端、移动端都会保持左列图片、右列计数器的并排布局，内容自动左右分散对齐，图片不会出现溢出问题。

可选优化方案 #

如果后续有布局扩展需求，建议放弃table改用flex布局，灵活性更高，修改HTML结构如下即可：

<section class="fiftyFiftySection" id="fiftyFiftySection">
  <div class="layout-container">
    <div class="left-col">
      <img src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png" alt="活动图">
    </div>
    <div class="right-col">
      <h4 style="color: #ffffff;">Current Estimated Payout</h4>
      <img src="https://res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt="" style="height: 50px; width: 30px;">
      <div id="odometer" class="odometer">000000</div>
    </div>
  </div>
</section>

对应新增CSS：

.layout-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.left-col, .right-col {
  width: 48%;
}
@media (max-width:500px) {
  /* 后续如果需要移动端改成上下排布，只需要加一行flex-direction: column即可，调整成本极低 */
}

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