个人中心
gpt4 book ai didi

html - 为什么 flex-box 适用于 div，而不适用于表格？

转载 作者：太空狗 更新时间：2023-10-29 13:51:01 25 4
gpt4 key购买 nike

下面的简单代码片段生成一个占用可用屏幕空间的网页，顶部是页眉，底部是页脚，主要内容占用尽可能多的空间(虚线边框使其更易于查看):

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，它不会扩展表格以占用可用空间:

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)不行？有没有办法修复第二个示例，使表格扩展并占用所有可用空间(不引入滚动条)？

一些注意事项:我的表格将有一行标题(均等宽)和几行(均等宽/高)。我知道可以使用一堆 div 和更多 CSS 重新创建一个表，但是沿着这条路走下去感觉就像把婴儿连同洗澡水一起倒掉(此外，我不会问这个问题并了解我是否只是绕过它)。此外，我在这里无法使用 JavaScript(而且看起来有点矫枉过正)。

我对 CSS/HTML 的了解足以让自己陷入困境，但还不足以让自己摆脱困境...

编辑:aavrug 对table 使用display: flex 的建议使得表格可以适当扩展以填充该区域，但是当我将多行/列添加到表中，它们不再是均匀分布的。我想保留 table 的单元格均匀分布。

最佳答案

我认为问题在于 the table box is placed inside a table wrapper box :

the table generates a principal block box called the table wrapper box that contains the table box itself and any caption boxes

enter image description here

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

values of non-inheritable properties are used on the table box and not the table wrapper box

所以你的 flex 被用在一个不是 flex 元素的盒子上，因此被忽略了。

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

解决方法很简单:

  1. 将表格放在包装器中，这将成为 flex 元素
  2. 使用 flex 布局根据需要调整 flex 元素的大小
  3. 让表格脱离流动并赋予它相对于 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;
}
<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>

只是为了好玩，一种避免添加包装器的 hacky 方法是将表格样式设置为 block ，并将自动插入的 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;
}
<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>

关于html - 为什么 flex-box 适用于 div，而不适用于表格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41421512/

25 4 0
文章推荐： git - 我可以在哪里报告 GitHub 错误？
文章推荐： android - 无法通过 Android Studio 3.0 项目结构搜索依赖项
文章推荐： git - 允许 PR 构建验证构建而不发布工件
文章推荐： git - 如何比较 BitBucket 中的两个提交？
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com