静态表格适配动态表格宽度问题求助（附示例链接）

我来帮你搞定这个宽度对齐的问题！核心原因是你原来的结构里，橙色表格的width:100%是相对于父级v-flex xs12的宽度，而粉色表格因为内容过宽会超出这个父级容器，导致两者宽度脱节。下面给你两种经过验证的可行方案，都只修改v-container内部的内容：

方案一：共享滚动容器（表格版） #

把两个表格放在同一个带横向滚动的容器里，让它们共享同一个宽度上下文——这个容器会被粉色表格的内容撑开，橙色表格的width:100%就会跟着这个撑开后的宽度走，完美同步：

<v-container fluid pa-0 ma-0>
  <v-layout wrap>
    <v-flex xs12>
      <!-- 外层滚动容器，确保两个表格共享宽度 -->
      <div style="overflow-x:auto;">
        <table style="width:100%;background-color:orange"><tr><td>1</td><td>2</td><td>3</td></tr></table>
        <table style="background-color:pink"><tr><td>1234567890</td><td>1234567890</td><td>1234567890</td></tr></table>
      </div>
    </v-flex>
  </v-layout>
</v-container>

方案二：v-flex替代表格（你提到可接受的方案） #

如果想用v-flex来实现橙色的三列布局，同样把它和粉色表格放在同一个滚动容器里，确保宽度对齐：

<v-container fluid pa-0 ma-0>
  <v-layout wrap>
    <v-flex xs12>
      <div style="overflow-x:auto;">
        <!-- 橙色的v-flex布局，宽度跟随滚动容器 -->
        <v-layout row style="width:100%;background-color:orange;">
          <v-flex>1</v-flex>
          <v-flex>2</v-flex>
          <v-flex>3</v-flex>
        </v-layout>
        <!-- 粉色表格 -->
        <table style="background-color:pink"><tr><td>1234567890</td><td>1234567890</td><td>1234567890</td></tr></table>
      </div>
    </v-flex>
  </v-layout>
</v-container>

原理说明 #

两种方案的核心思路是一致的：让橙色内容和粉色内容处于同一个宽度上下文中。外层的滚动容器会被内容更宽的粉色表格撑开，橙色内容的width:100%就会基于这个撑开后的宽度计算，而不是固定的父容器宽度。这样无论容器怎么调整尺寸、是否垂直滚动，两者的宽度都会始终保持一致。

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