CSS Flexbox with tables as items

Question

I would like to use CSS flexbox on a containing DIV of two tables, and making one of the tables fill the available space using flex-grow. However, it doesn't grow. It seems as though this is because the tables aren't block display elements. I have it working if I wrap the TABLEs inside DIVs. However, I wonder if there is anyway to get this to work without the extra DIVs?

Below is an example - the first container is without the DIVS, the second is with DIVs and has the desirable layout.

div.container {
    display: flex;
    background-color: red;
}

#nodivs table:first-child {
    background-color: green;
}

#nodivs table:last-child {
    background-color: blue;
    flex-grow: 1;
}



#divs div:first-child {
    background-color: green;
}

#divs div:last-child {
    background-color: blue;
    flex-grow: 1;
}
#divs div:last-child table {
    width: 100%
}

<div id="nodivs" class="container">
    <table>
        <thead>
            <tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
        </thead>
    </table>
    <table>
        <thead>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
        </thead>
    </table>
</div>
<br><br>
<div id="divs" class="container">
    <div><table>
        <thead>
            <tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
        </thead>
    </table></div>
    <div><table>
        <thead>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
        </thead>
    </table></div>
</div>

You try setting your `` to `display:block;` ? You may have to also reset the `display` for the ``'s and ``'s as well. But at that point I would just wrap it in a div lol. I would also try adding this style: `div.container table { width: 100%; }` for the `nodivs` version — zgood, Jul 28 '15 at 19:23
Semantically speaking there should be no need to have separate HTML code to have both flex-box qualities and tabular layout. I'm curious, why do you have 2 separate tables? Combining them would probably solve your problem. — jaunt, Jul 28 '15 at 21:39
jaunt - in reality, the two tables I actually are displaying two sets of unrelated data. — Lee Atkinson, Jul 29 '15 at 15:44
zgood, if I set the table to display: block, the columns within it won't layout naturally within it. — Lee Atkinson, Jul 29 '15 at 15:47

score 1 · Answer 1 · answered Dec 15 '21 at 14:10

As explained in https://bugzilla.mozilla.org/show_bug.cgi?id=1455976, this problem is a bug. This bug is fixed in a newer version of browsers. I explain a trick to solve this problem in older browsers.

This trick converts <table> display to block and converts its <tbody> display to table and applies width 100% to <tbody>. In this trick you can use single <tbody>, <thead>, <tfoot> in <table> tag or even using <tr> directly in <table> tags. Known problem of this method is using two or more <tbody>, <thead> or <tfoot> in one <table> that cause messed up columns.

div.container {
    display: flex;
    background-color: red;  
}

div.container table{
    display: block;
    width: auto;
}

div.container thead, div.container tbody, div.container tfoot{
    width: 100%;
    display: table;
}

#nodivs table:first-child {
    background-color: green;
}

#nodivs table:last-child {
    background-color: blue;
    flex-grow: 1;
}

<div id="nodivs" class="container">
    <table>
        <thead>
            <tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
        </thead>
    </table>
    <table>
        <thead>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
            <tr><th>T2C1 AAAA</th><th>T2C2</th><th>T2C3</th></tr>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
        </tbody>        
    </table>
</div>

Hastig Zusammenstellen · Answer 2 · 2016-08-26T12:06:42.740

Took me a while but I think i got it, not that it matters much at this point :D

I made each element in 2nd table flex and added flex: 1 to them. I made the first table flex: 0;

Flex-grow: 1 should work for all the flex: 1's as well but a little differently, barely noticeable.

div.container {
    display: flex;
    background-color: red;
}

#nodivs table:first-child {
    display: flex;
    flex: 0;
    background-color: orange;
}

#nodivs table:last-child {
    display: flex;
    flex: 1;
    background-color: green;
}
#nodivs table:last-child thead {
   display: flex;
   flex: 1;
   background-color: red;
}
#nodivs table:last-child tr {
    display: flex;
    flex: 1;
    background-color: white;
}
#nodivs table:last-child th {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    background-color: blue;
}



#divs div:first-child {
    background-color: green;
}

#divs div:last-child {
    background-color: blue;
    flex-grow: 1;
}
#divs div:last-child table {
    width: 100%
}

<div id="nodivs" class="container">
    <table>
        <thead>
            <tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
        </thead>
    </table>
    <table>
        <thead>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
        </thead>
    </table>
</div>
<br><br>
<div id="divs" class="container">
    <div><table>
        <thead>
            <tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
        </thead>
    </table></div>
    <div><table>
        <thead>
            <tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
        </thead>
    </table></div>
</div>

Your tables contain only one row, which is why it appears that it "works", as they are actually not tables but flexboxes (you use `display:flex` explicitly even). If you add rows to those tables, those rows will all be displayed on the same row, because it's a flexbox, not a table. — FacelessPanda, Jan 23 '20 at 10:02
Thanks for the question / answer here, but `flex: 1` and `flex-grow: 1` are the same thing. — SRack, Mar 31 '20 at 13:53
@SRack not defending my answer at all but there is a [subtle difference between flex:1 and flex-grow:1](https://stackoverflow.com/a/45772102/3377049) — Hastig Zusammenstellen, Apr 02 '20 at 22:31

CSS Flexbox with tables as items

2 Answers2