为什么flex-box只能与div一起使用，而不能与表格一起使用?

本文介绍了为什么flex-box只能与div一起使用，而不能与表格一起使用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

以下简单代码段将导致单个网页占据可用的屏幕空间，顶部显示顶部的标题，底部显示底部的页脚，并且主要内容占用尽可能多的空间(以虚线框使其更容易看到):

The following simple snippet results in a single web page that takes up the available screen space with a header at the top, a footer at the bottom, and the main content taking up as much space as possible (with a dotted border to make it easier to see):

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-flow: column;
}

h1, small {
  flex: 0 1 auto;
}

div {
  flex: 1 1 auto;
  border: 1px dotted;
}

<!doctype html>
<html>
  <body>
    <h1>Some Header</h1>
    <div>Some Text</div>
    <small>Some Footer</small>
  </body>
</html>

如果我修改CSS和HTML以代替使用table代替div，它不会扩展表以占用可用空间:

If I modify the CSS and HTML to instead use a table in place of a div, it doesn't expand the table to consume the available space:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-flow: column;
}

h1, small {
  flex: 0 1 auto;
}

table {
  flex: 1 1 auto;
  border: 1px dotted;
}

<!doctype html>
<html>
  <body>
    <h1>Some Header</h1>
    <table><tr><td>Some Content</td></tr></table>
    <small>Some Footer</small>
  </body>
</html>

为什么第一个版本(带有div)有效，而第二个版本(带有table)无效?并有办法解决第二个示例，以便表扩展并占用所有可用空间(不引入滚动条)吗?

Why does the first version (with div) work but the second version (with table) not? And is there a way to fix the second example so the table expands and consumes all available space (without introducing scroll bars)?

一些注意事项:我的表将具有一行标题(均具有相同的宽度)和几行(均具有相同的宽度/高度).我知道可以使用一堆div和更多CSS重新创建表，但是沿着那条路线走就像把婴儿扔进了洗澡水(此外，我不会问这个问题并了解是否我只是在周围乱砍).另外，JavaScript在这里对我不可用(似乎有点过头).

Some notes: my table will have a row of headers (all with equal width) and several rows (all with equal width/height). I know it's possible to recreate a table using a bunch of divs and more CSS, but going down that route feels like throwing out the baby with the bathwater (and besides, I wouldn't get to ask this question and learn if I just hacked around it). Also, JavaScript isn't available to me here (and seems like overkill).

我知道有足够的CSS/HTML会使自己陷入困境，但不足以使自己摆脱困境...

I know enough CSS/HTML to get myself into trouble but not enough to get myself out of it...

aavrug建议在table中使用display: flex，这样表可以正确扩展以填充该区域，但是当我向表中添加多行/列时，它们就没有了.等分的时间更长.我想保留table的单元格均匀分布.

aavrug's suggestion to use display: flex for the table makes it so the table properly expands to fill the area, but when I add multiple rows/columns to the table they are no longer equidistributed. I'd like to preserve the table's cell equidistribution.

推荐答案

我认为问题在于表格盒放置在表格包装盒内:

因此，表框不再是flex容器的子级，因此不是flex项. flex项目是表格包装盒，但是您将flex属性设置为table元素，并且

So the table box is no longer a child of the flex container, and thus is not a flex item. The flex item is the table wrapper box, but you set the flex property to the table element, and

因此，您的flex用在不是弹性项目的盒子上，因此会被忽略.

So your flex is used on a box which is not a flex item and thus is ignored.

如果在表包装盒上使用了该属性，则可能会起作用，但是无法选择它.即使可以，也不清楚是否应根据其生成的表格布局而不是其参与的Flexbox布局调整其大小.

It might have worked if that property was used on the table wrapper box, but it's not possible to select it. Even if you could, it wouldn't be clear whether it should be sized according to the tabular layout it generates instead of by the the Flexbox layout in which it participates.

解决方案很简单:

将表格放在包装中，这将是弹性项目
使用弹性布局根据需要调整弹性项目的大小
使表格不再流通，并赋予其相对于弹性商品的确定长度

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-flow: column;
}
h1, small {
  flex: 0 1 auto;
}
div {
  position: relative;
  flex: 1 1 0; /* Chrome needs non-auto flex-basis */
  overflow: auto;
}
table {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  table-layout: fixed;
  border-collapse: collapse;
}
td {
  border: 1px dotted;
  text-align: center;
}

<h1>Some Header</h1>
<div>
  <table><tr>
    <td>This</td>
    <td>is</td>
    <td>equidistributed.</td>
  </tr><tr>
    <td>This</td>
    <td>is also</td>
    <td>equidistributed.</td>
  </tr></table>
</div>
<small>Some Footer</small>

只是为了好玩，一种避免添加包装器的怪异方法是将表格样式化为块，将自动插入的tbody样式化为表格.

Just for fun, a hacky way to avoid adding the wrapper would be styling the table as a block and the automatically inserted tbody as the table.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-flow: column;
}
h1, small {
  flex: 0 1 auto;
}
table {
  display: block;
  position: relative;
  flex: 1 1 0;
}
tbody {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  table-layout: fixed;
  border-collapse: collapse;
  box-sizing: border-box;
}
td {
  border: 1px dotted;
  text-align: center;
}

<h1>Some Header</h1>
<table><tr>
  <td>This</td>
  <td>is</td>
  <td>equidistributed.</td>
</tr><tr>
  <td>This</td>
  <td>is also</td>
  <td>equidistributed.</td>
</tr></table>
<small>Some Footer</small>

这篇关于为什么flex-box只能与div一起使用，而不能与表格一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！