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

发布时间：2021-05-15 20:09 所属栏目：12 来源：网络整理

导读：下面的简单片段会产生一个单独的网页,占据可用的屏幕空间,顶部有一个标题,底部是一个页脚,主要内容占用尽可能多的空间(带有虚线边框,使其更容易)查看)： html,body { width: 100%; height: 100%; margin: 0; padding: 0;}body { display: flex; flex-flow: c

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

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而不是使用表来代替div,它不会扩展表以占用可用空间：

html,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)工作但第二个版本(带表格)不工作？有没有办法修复第二个例子,以便表扩展并消耗所有可用空间(不引入滚动条)？

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

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

编辑：aavrug建议使用display：flex for table使得表正确扩展以填充区域,但是当我向表中添加多行/列时,它们不再是等分布的.我想保留表格的细胞等分布.

解决方法

html表元素在flex容器中保留其display属性：

display: table

因此,它不接受flex属性.

但是,只需使用display：block display：flex覆盖该规则,布局应该有效.

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-flow: column;
}
h1,small {
  flex: 0 1 auto;
}
table {
  display: flex;
  flex: 1 1 auto;
}
tbody {
  display: flex;
  width: 100%;
}
tr {
  display: flex;
  width: 100%;
}
td {
  flex: 1;
  border: 1px solid red;
}

<h1>Some Header</h1>
<table>
  <tr>
    <td>Some Content</td>
    <td>Some Content</td>
    <td>Some Content</td>
    <td>Some Content</td>
    <td>Some Content</td>
  </tr>
</table>
<small>Some Footer</small>

（编辑：ASP站长网）