带有表格作为项目的CSS Flexbox

Question

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

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

＆＃13;

＆＃13;

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%
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我花了一段时间，但我想我明白了，而不是在这一点上重要的是：D

我在第二张表格中制作了每个元素，并为其添加了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>

<div class="row">
            <div class="col-lg-12"> 
<div class="bs-component">
                    <ul class="nav nav-tabs responsive">
                        <li class="active">
                            <a data-toggle="tab" href="#tab1">Contract-Wise</a>
                        </li>
                        <li>    
                            <a data-toggle="tab" href="#tab2" onclick = "show_sdm()">SDM-Wise</a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#tab3" onclick = "show_sub()">SUB-Wise</a>
                        </li>
                               <li>
                            <a data-toggle="tab" href="#tab4" onclick = "show_chain()">ChainName-Wise</a>
                        </li>
                     </ul>

<div class="tab-content">
    <div id="tab1" class="tab-pane fade active in">
        <table id = "contract_wise" class="table table-striped table-bordered table-hover footable toggle-medium">
            <thead>
                <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
             </thead>
             <tbody>
             </tbody>
         </table>
     </div>