CODEWITHSUNDEEP
cssflexboxvuetify.js
ekjcfn3902039
ekjcfn3902039

Reputation: 1839

table width not 100%

I have 2 tables. The first table (shown in orange in the example) is statically created and contains 3 columns. The second table (shown in pink in the example) is dynamically created and can contain n columns.

I am trying to stretch the first table to be as wide as whatever the second table is. At first glance, it looks to be correct. However if you vertically scroll the container, you will see that the orange table is only as wide as the container. It is not as wide as the pink table.

I originally tried using three "v-flex xs4" tags instead of the orange table, but I pretty much got the same result. I am open to using v-flex in lieu of the orange table.

Here is the example: https://jsfiddle.net/z4d1m7hy/1/

The relevant code is shown below. Anything outside of the v-container should not be edited

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

Lastly, I would like the 'orange table' to always be as wide as the pink table regardless of how the container is resized

Upvotes: 0

Views: 113

Answers (1)

e.g-m
e.g-m

Reputation: 36

The css that is making your orange table unable to stretch to the parent's width is the flex-direction added in the view-grid-middle class. It is currently flex-direction: column; but should modified be to flex-direction: row.

It will stretch the orange table to be the same width as the pink table. The only caveat is that the space inside the orange table will be distributed equally between each table cell.

**Make sure to make all your tables width: 100%; so they can stretch with the window resize.

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

https://jsfiddle.net/1vh60tyn/

Upvotes: 1

Related Questions