css - 表格宽度不是 100%

Question

我有 2 个表。第一个表(在示例中以橙色显示)是静态创建的，包含 3 列。第二个表(在示例中以粉红色显示)是动态创建的，可以包含 n 列。

我正在尝试将第一个表拉伸(stretch)到与第二个表一样宽。乍一看，似乎是正确的。但是，如果垂直滚动容器，您会看到橙色表格的宽度与容器一样宽。它没有粉红色的 table 那么宽。

我最初尝试使用三个“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>',

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

Answer 1

使您的橙色表格无法拉伸(stretch)到父级宽度的 css 是在 view-grid-middle 类中添加的 flex-direction。目前是 flex-direction: column;但应该修改为 flex-direction: row。

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

**确保所有表格的宽度为:100%；因此它们可以随着窗口大小的调整而拉伸(stretch)。

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

https://jsfiddle.net/1vh60tyn/