Question

我有2张桌子。第一个表（在示例中以橙色显示）是静态创建的，包含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>',

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

Answer 1

使橙色表无法拉伸到父级宽度的css是在view-grid-middle类中添加的flex方向。当前是flex-direction：column;但应修改为flex-direction：row。

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

**请确保将所有表格宽度设置为：100％；因此它们可以随着窗口大小的变化而伸展。

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

https://jsfiddle.net/1vh60tyn/

桌子宽度不是100％

1 个答案: