Css 桌子宽度不是100%

我有两张桌子。第一个表（示例中以橙色显示）是静态创建的，包含3列。第二个表（示例中以粉红色显示）是动态创建的，可以包含n列

我试着把第一张桌子拉得和第二张桌子一样宽。乍一看，这似乎是正确的。但是，如果垂直滚动容器，您将看到橙色表格仅与容器一样宽。它没有那张粉红色的桌子宽

我最初尝试使用三个“v-flex xs4”标记来代替橙色的表，但我得到了几乎相同的结果。我愿意用v-flex代替橙色桌子

以下是一个例子：

相关代码如下所示。不应编辑v形容器之外的任何内容

'                  <v-container fluid pa-0 ma-0>',
'                    <v-layout wrap>',
'                      <v-flex xs12>',
'                        <table style="width:100%;background-color:orange"><tr><td>1</td><td>2</td><td>3</td></tr></table>',
'                      </v-flex>',
'                      <v-flex xs12>',
'                        <table style="background-color:pink"><tr><td>1234567890</td><td>1234567890</td><td>1234567890</td></tr></table>',
'                      </v-flex>',
'                    </v-layout>',
'                  </v-container>',

”，
'                    ',
'                      ',
'                        123',
'                      ',
'                      ',
'                        123456789012345678901234567890',
'                      ',
'                    ',
'                  ',

---

最后，我希望“橙色表格”始终与粉色表格一样宽，无论容器大小如何调整

使橙色表格无法延伸到父级宽度的css是视图网格中间类中添加的弯曲方向。它当前的伸缩方向是：列；但应修改为“弯曲方向：行”

它会将橙色的桌子拉伸到与粉色桌子相同的宽度。唯一需要注意的是，橙色表格内的空间将在每个表格单元之间平均分配

**确保所有桌子的宽度：100%；因此，它们可以随着窗口大小的调整而拉伸

.view-grid-middle {
  flex-direction: row;
}