我有2张桌子。第一个表(在示例中以橙色显示)是静态创建的,包含3列。第二个表(在示例中以粉红色显示)是动态创建的,可以包含n列。
我正在尝试将第一个表拉伸到与第二个表一样宽的宽度。乍看之下,它看起来是正确的。但是,如果垂直滚动容器,则会看到橙色表仅与容器一样宽。它没有粉红色桌子那么宽。
我最初尝试使用三个“ v-flex xs4”标签代替橙色表格,但是我得到的结果几乎相同。我愿意使用v-flex代替橙色桌子。
这里是示例: https://jsfiddle.net/z4d1m7hy/1/
相关代码如下所示。 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>',
最后,无论容器如何调整大小,我都希望“橙色表”始终与粉红色表一样宽
答案 0 :(得分:1)
使橙色表无法拉伸到父级宽度的css是在view-grid-middle类中添加的flex方向。当前是flex-direction:column;但应修改为flex-direction:row。
它将拉伸橙色的桌子,使其宽度与粉色的桌子相同。唯一需要注意的是,橙色表内部的空间将在每个表单元格之间平均分配。
**请确保将所有表格宽度设置为:100%;因此它们可以随着窗口大小的变化而伸展。
.view-grid-middle {
flex-direction: row;
}