以表格为项目的 CSS Flexbox答案

【问题标题】：CSS Flexbox with tables as items以表格为项目的 CSS Flexbox
【发布时间】：2015-10-19 12:53:33
【问题描述】：

我想在包含两个表的 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>

【问题讨论】：

您尝试将您的<tables> 设置为display:block; 吗？您可能还必须为<tr> 和<td> 重置display。但那时我会把它包装在一个 div 中，哈哈。我也会尝试添加这种样式：div.container table { width: 100%; } 用于nodivs 版本
从语义上讲，应该不需要单独的 HTML 代码来同时具有 flex-box 质量和表格布局。我很好奇，为什么你有 2 个单独的表？将它们结合起来可能会解决您的问题。
jaunt - 实际上，这两张表我实际上是在显示两组不相关的数据。
zgood，如果我将表格设置为 display: block，其中的列将不会在其中自然布局。

标签： css flexbox

【解决方案1】：

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

我将第二个表格中的每个元素都设置为 flex 并添加 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>

【讨论】：

您的表格仅包含一行，这就是为什么它看起来“有效”的原因，因为它们实际上不是表格而是弹性框（您甚至明确使用display:flex）。如果您向这些表中添加行，这些行将全部显示在同一行上，因为它是一个弹性框，而不是一个表。
感谢您在这里提出问题/回答，但flex: 1 和flex-grow: 1 是一回事。
@SRack 根本没有为我的答案辩护，但有一个 subtle difference between flex:1 and flex-grow:1

【解决方案2】：

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

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

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>

【讨论】：