为什么flex-box可以使用div而不是表格？

Question

为什么flex-box可以使用div而不是表格？

Cor*_*lks 10 html css css3 css-tables flexbox

下面的简单代码片段会产生一个网页占据可用的屏幕空间,顶部有一个标题,底部是一个页脚,主要内容占用尽可能多的空间(带有虚线边框,使其更容易)查看):

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

为什么第一个版本(有div)工作但第二个版本(带table)不工作？有没有办法修复第二个例子,以便表扩展并消耗所有可用空间(不引入滚动条)？

一些注意事项:我的表将有一行标题(所有宽度相等)和几行(都具有相同的宽度/高度).我知道可以使用一堆divs和更多的CSS 来重新创建一个表,但沿着这条路走下去感觉就像用洗澡水把婴儿扔出去一样(此外,我不会问这个问题并了解我是否只是入侵了周围).此外,我在这里找不到JavaScript(看起来有点矫枉过正).

我知道足够的CSS/HTML让自己陷入困境,但还不足以让自己摆脱它......

编辑: aavrug的建议,使用display: flex了table使得它如此表适当扩大,以填补区域,但是当我添加多行/列表他们不再equidistributed.我想保留table细胞等分布.

Answer 1

Ori*_*iol 9

我认为问题在于表格盒放置在表格包装盒中：

表格生成一个称为表格包装盒的主要块框，其中包含表格框本身和任何标题框

所以 table box 不再是 flex 容器的子元素，因此也不是 flex 项目。flex 项是表包装盒，但您将flex属性设置为table元素，并且

不可继承属性的值用于表格框而不是表格包装框

所以你flex在一个不是弹性项目的盒子上使用，因此被忽略。

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

解决方法很简单：

将表放在一个包装器中，这将是 flex 项目
使用弹性布局根据需要调整弹性项目的大小
将表格从流程中取出并为其指定相对于 flex 项目的确定长度

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

只是为了好玩，避免添加包装器的一种hacky 方法是将表格设置为块，并将自动插入的 tbody 设置为表格。

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 0

有一件事，您应该使用 vw 和 vh 单位来表示高度和宽度，大多数浏览器不支持它们，但它们确实擅长它们的功能。另外，对于表格问题，您从未指定它的宽度，因此您只会得到适合文本的单元格。

添加诸如“宽度：75vw;”之类的内容表格样式会有所帮助（您可以使用 %s 作为宽度）

如果你使用 flex，你不会倾向于使用 `width:` 属性，而是使用 `flex: ...`，这就是他所做的。 (2认同)

归档时间：	8 年，10 月前
查看次数：	7236 次
最近记录：	8 年，10 月前