以表格作为元素的 CSS Flexbox

Question

我想在包含两个表的 DIV 上使用 CSS flexbox，并使用 flex-grow 使其中一个表填充可用空间。但是，它不会增长。这似乎是因为表格不是 block 显示元素。如果我将 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

如 https://bugzilla.mozilla.org/show_bug.cgi?id=1455976 中所述，这个问题是一个bug。此错误已在较新版本的浏览器中修复。我解释了在旧版浏览器中解决此问题的技巧。

这个技巧可以转换 <table>显示为 block并转换它的 <tbody>显示为 table并将宽度 100% 应用于 <tbody> .在这个技巧中，您可以使用单个 <tbody> , <thead> , <tfoot>在 <table>标记甚至使用 <tr>直接在<table>标签。此方法的已知问题是使用两个或多个 <tbody> , <thead>或 <tfoot>在一个<table>这会导致列困惑。

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>