移动端表格布局优化：实现满列宽、去内边距及按钮居中

我来帮你搞定这个移动端的样式调整问题～你遇到的核心问题是行内样式的优先级高于外部CSS，所以直接写媒体查询里的规则没法覆盖掉HTML里的style属性值，另外原来的选择器范围太广，也没精准定位到需要修改的元素。下面是针对性的解决方案：

核心调整思路 #

• 用!important强制覆盖行内样式（行内样式优先级最高，这是这种场景下最直接的覆盖方式；你也可以通过更复杂的选择器权重来实现，但!important在这里简单高效）
• 精准定位需要修改的表格单元格和按钮容器，避免影响其他无关元素

修改后的媒体查询CSS #

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
  /* 让外层容器内容整体居中 */
  .modulo_datos {
    text-align: center;
  }

  /* 覆盖上方表格列的400px行内宽度，设为100% */
  .modulo_datos > table > tbody > tr:first-child > td:first-child {
    width: 100% !important;
    padding-left: 0 !important;
  }

  /* 移除下方表格列的30px左内边距，并设为100%宽度 */
  .modulo_datos > table > tbody > tr:first-child > td:last-child {
    padding-left: 0 !important;
    width: 100% !important;
  }

  /* 让嵌套的内层表格占满父容器宽度，内容自适应 */
  .modulo_datos table table {
    width: 100%;
    margin: 0 auto;
  }

  /* 让按钮所在的单元格内容居中 */
  .modulo_datos > table > tbody > tr:last-child > td {
    text-align: center;
  }

  /* 优化移动端按钮间距，避免挤在一起（可选调整） */
  .modulo_datos button {
    margin: 6px 3px;
  }
}

代码说明 #

1. 外层容器居中：给.modulo_datos设置text-align: center，为内部元素提供居中基础
2. 覆盖上方列宽度：通过精确的层级选择器定位到第一个tr里的第一个td，用!important强制覆盖行内的width:400px
3. 移除下方列内边距：定位到第一个tr里的第二个td，覆盖行内的padding-left:30px，同时设为100%宽度适配移动端
4. 内层表格适配：让嵌套的小表格占满父容器，确保内容不会出现溢出或错位
5. 按钮居中：给按钮所在的td设置text-align:center，直接让按钮居中显示，额外的按钮间距是为了提升移动端的触摸体验

这样修改后，就能完全覆盖HTML里的行内样式，实现你要的移动端居中、列宽100%、移除内边距的效果啦～

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