带有表格作为项目的CSS Flexbox

Question

我想在包含两个表的DIV上使用CSS flexbox,并使用flex-grow使其中一个表填充可用空间.但是,它没有增长.似乎这是因为表不是块显示元素.如果我将TABLE包装在DIV中,我可以使用它.但是,我想知道是否有没有额外的DIV可以让它工作？

下面是一个例子 - 第一个容器没有DIVS,第二个容器是DIV并且具有理想的布局.

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>

Answer 1

我花了一段时间，但我想我明白了，但现在这并不重要：D

我在第二张表格中制作了每个元素并添加flex: 1到它们中。我做了第一张桌子flex: 0;

Flex-grow: 1也应该适用于所有flex: 1' ，但略有不同，几乎不明显。

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>