桌子宽度不是100%

时间:2019-01-30 14:32:57

标签: css css3 flexbox vuetify.js

我有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>',

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

1 个答案:

答案 0 :(得分:1)

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

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

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

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

https://jsfiddle.net/1vh60tyn/