ширина стола не 100%

Question

У меня есть 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>',

Наконец, я бы хотел, чтобы «оранжевый стол» всегда был таким же широким, как розовый стол, независимо от того, как изменяется размер контейнера

Answer 1

CSS, который делает вашу оранжевую таблицу неспособной растянуть до ширины родителя, является flex-direction, добавленным в классе view-grid-middle.В настоящее время это flex-direction: column;но должен быть изменен в направлении flex-direction: row.

Он вытянет оранжевый стол на такую ​​же ширину, что и розовый стол.Единственное предостережение в том, что пространство внутри оранжевого стола будет равномерно распределено между каждой ячейкой таблицы.

** Убедитесь, что ширина всех ваших столов равна: 100%;чтобы они могли растягиваться с изменением размера окна.

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

https://jsfiddle.net/1vh60tyn/