使用 flexbox 控制表格的布局在 webkit 浏览器中有效，但在 Firefox 中，<td>s 仅渲染与其自身内容一样宽的内容。
示范：http://codepen.io/afraser/pen/wMgbzr?editors=010
* {
box-sizing: border-box;
}
table {
border: 1px solid #ddd;
width: 100%;
}
tbody {
background: #fff;
}
tr {
display: flex;
}
td:first-child {
flex: 1 1 80%;
background: mistyrose;
}
td:nth-child(2) {
flex: 0 0 10%;
background: Aquamarine;
}
td:nth-child(3) {
flex: 0 0 10%;
background: pink;
}<table>
<tbody>
<tr>
<td>Ted</td>
<td>1</td>
<td>100%</td>
</tr>
<tr>
<td>Turd Ferguson</td>
<td>2</td>
<td>65%</td>
</tr>
<tr>
<td>Hingle McKringleberry</td>
<td>3</td>
<td>99%</td>
</tr>
</tbody>
</table>我尝试了几种变体，包括：
flex-grow, flex-shrink, and flex-basis单独。flex-basis而不是百分比。table-layout: fixed.我在这里没有看到任何记录：https://github.com/philipwalton/flexbugs并且在其他地方已经干涸了。有谁知道发生了什么事吗？
这是因为，根据 CSS 表，匿名表对象当表格元素不是表格的子元素时应该生成：
根据Flexbox 最后通话工作草案，正是那个匿名表格成为了弹性项目，而不是表格单元格：
的一些值display触发匿名框的创建 围绕原来的盒子。它是最外面的盒子 - 的直接子代 这柔性集装箱盒——那就变成了弹性项目。为了 例如，给定两个连续的子元素display: table-cell, the 周围生成的匿名表包装盒 他们 [CSS21]成为弹性项目.
由于表格单元格不是弹性项目，因此它们忽略了flex财产。它适用于匿名表，但 CSS 选择器无法选择匿名元素。
然而，Chrome 不同意该规范，并决定屏蔽表格单元格。
然后是CSS工作组decided标准化 Chrome 的行为：
如果您有一个弹性容器并在其中放置了两个表格单元格，它们 不会独立成为弹性项目。他们会用匿名的方式包装 表，这将是灵活的。
然而，Chrome 已经实现了它，以便每个项目都是独立的 一个弹性项目。 [...] 因此它将表格单元格变成块。
我在一次会议上至少看过一次他们的演讲 利用这一点为 Flex 创建后备行为。 [...] 如果你是 不想触发回退，我不知道为什么你要放一堆 Flex 中的表格单元格并将其包裹在匿名内容中。 [...]
已解决：只需块化 Flex 和网格容器的子级即可。 不要修复匿名框
The 第一个 Flexbox 候选推荐与该新决议一起发布：
的一些值display通常会触发创建 原始盒子周围的匿名盒子。如果这样的盒子是一个柔性 物品，它首先被阻止，因此匿名框创建将 不会发生。例如，两个连续的弹性项目 with display: table-cell会变成两个独立的display: block 弹性项目，而不是被包装成一个单一的 匿名表。
然后 Firefox 从版本 47 开始实现了新行为（错误 1185140).
对于旧版本，您可以手动将单元格设置为块：
.flex-container > td {
display: block;
}
* {
box-sizing: border-box;
}
table{
border: 1px solid #ddd;
width: 100%;
}
tbody {
background: #fff;
}
tr {
display: flex;
}
td {
display: block;
}
td:first-child {
flex: 1 1 80%;
background: mistyrose;
}
td:nth-child(2){
flex: 0 0 10%;
background: Aquamarine;
}
td:nth-child(3){
flex: 0 0 10%;
background: pink;
}<table>
<tbody>
<tr>
<td>Ted</td>
<td>1</td>
<td>100%</td>
</tr>
<tr>
<td>Turd Ferguson</td>
<td>2</td>
<td>65%</td>
</tr>
<tr>
<td>Hingle McKringleberry</td>
<td>3</td>
<td>99%</td>
</tr>
</tbody>
</table>