Fatal编程技术网
  • html/
  • Html 设置溢出：使用display:flex在表格上滚动

Html 设置溢出：使用display:flex在表格上滚动

html css

Html 设置溢出：使用display:flex在表格上滚动,html,css,overflow,flexbox,Html,Css,Overflow,Flexbox,我有一个带有display:flex属性的表，其单元格将垂直居中。当单元格数量超过表格显示的数量时，overflow:scroll属性不考虑最上面的单元格 在下面的示例代码中，滚动在字母K处停止，此时它应该一直滚动到字母A。这是什么原因造成的 #容器{ 高度：180像素； 显示器：flex； 柔性流：行； 对齐项目：拉伸； 边框：1px灰色虚线； } 桌子{ 显示器：flex； 柔性流：行； 对齐项目：居中； 利润率：10px； 溢出：滚动； 边框：1px蓝色虚线； } 运输署{ 高度：10p

我有一个带有
display:flex
属性的表，其单元格将垂直居中。当单元格数量超过表格显示的数量时，
overflow:scroll
属性不考虑最上面的单元格

在下面的示例代码中，滚动在字母K处停止，此时它应该一直滚动到字母A。这是什么原因造成的

#容器{
高度：180像素；
显示器：flex；
柔性流：行；
对齐项目：拉伸；
边框：1px灰色虚线；
}
桌子{
显示器：flex；
柔性流：行；
对齐项目：居中；
利润率：10px；
溢出：滚动；
边框：1px蓝色虚线；
}
运输署{
高度：10px；
宽度：100px；
边框：1px纯红；
}
#货柜组{
弹性：1；
利润率：10px；
边框：1px红色虚线；
}

A.
B
C
D
E
F
G
H
我
J
K
L
M
N
O
P
Q
R
s
T
U
v
W
X
Y
Z
A.
B
C
根据，浏览器必须将
元素包装在
元素中，如果没有：

插入内部(http://jsfiddle.net/ed9msnfp/)“>

该
的高度将是所有行的高度。但是，
的高度可以更小。这在表格布局中不是问题，因为表格的高度将被视为最小高度

但是，
现在参与flex布局，而不是表布局。由于
是一个
表行组
元素，其父元素既不是
表
也不是
内联表
（它是
flex
），因此会生成一个
表
父元素

被包装在匿名表中(http://jsfiddle.net/1wf1hu0d/)“>

现在我们有了一个
，它是一个带有一条柔性线的柔性容器，并且它包含一个柔性项（匿名
表
）

柔性线的高度将是柔性容器的高度（）：

如果柔性容器是，并且有一个明确的十字 尺寸，柔性线的交叉尺寸是柔性容器的内部尺寸 交叉尺寸

然后使用
align items:center
。这将垂直对齐柔性线中间的匿名
表
（以及
），即使它在上方或下方溢出

问题是滚动条允许滚动查看下面溢出的内容，而不是上面溢出的内容

因此，我建议您不要将项目对齐：居中，而应：

在通过和校准之前， 任何正的可用空间都将分配给该区域中的自动边距 维度

请注意区别：自动边距仅分配正的自由空间，而不是负的自由空间

因此，我们只需使用

页边距：自动0；/*推到中心（垂直）*/
但是有一个问题：如上所述，flex项是一个匿名生成的元素，所以我们不能用CSS选择器选择它

为了解决这个问题，我们可以在
中添加
display:block
。然后，它将不会被包装在任何匿名
表
元素中，因此它将是一个灵活的项目，并且对齐将起作用

请注意，这不会破坏表，因为这组
是
表行
s，将生成一个匿名
表
父级，但现在位于
内：

(http://jsfiddle.net/bvjvd30u/)“>

因此，您可以使用以下代码：

t车身{
显示：block；/*禁用表格布局，并创建弹性项*/
边距：自动0；/*推至中心（垂直）*/
}

#容器{
高度：180像素；
显示器：flex；
柔性流：行；
对齐项目：拉伸；
边框：1px灰色虚线；
}
桌子{
显示器：flex；
柔性流：行；
利润率：10px；
溢出：滚动；
边框：1px蓝色虚线；
}
t车身{
显示：block；/*禁用表格布局，并创建弹性项*/
边距：自动0；/*推至中心（垂直）*/
}
运输署{
高度：10px；
宽度：100px；
边框：1px纯红；
}
#货柜组{
弹性：1；
利润率：10px；
边框：1px红色虚线；
}

A.
B
C
D
E
F
G
H
我
J
K
L
M
N
O
P
Q
R
s
T
U
v
W
X
Y
Z
A.
B
C
请访问-

您将看到为
tbody
添加的新类边距参数是最重要的，它确保了内容的垂直中间位置

margin: auto, 0; /*this is for vertically middle position*/
margin: 0, auto; /*this is for horizontally center position*/
您还可以查看HTML代码

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
#container {
  height: 180px;
  display: flex;
  flex-flow: row;
  align-items: stretch;
  border: 1px dashed gray;
}

table {
  display: flex;
  flex-flow: row;
  align-items: center;
  margin: 10px;
  overflow: scroll;
  border: 1px dashed blue;
}

td {
  height: 10px;
  width: 100px;
  border: 1px solid red;
}

#container div {
  flex: 1;
  margin: 10px;
  border: 1px dashed red;
}
tbody {
  display: block;
  margin: auto 0;
}
</style>
</head>
<body>
<div id="container">
  <table>
    <tr><td>A</td></tr>
    <tr><td>B</td></tr>
    <tr><td>C</td></tr>
    <tr><td>D</td></tr>
    <tr><td>E</td></tr>
    <tr><td>F</td></tr>
    <tr><td>G</td></tr>
    <tr><td>H</td></tr>
    <tr><td>I</td></tr>
    <tr><td>J</td></tr>
    <tr><td>K</td></tr>
    <tr><td>L</td></tr>
    <tr><td>M</td></tr>
    <tr><td>N</td></tr>
    <tr><td>O</td></tr>
    <tr><td>P</td></tr>
    <tr><td>Q</td></tr>
    <tr><td>R</td></tr>
    <tr><td>S</td></tr>
    <tr><td>T</td></tr>
    <tr><td>U</td></tr>
    <tr><td>V</td></tr>
    <tr><td>W</td></tr>
    <tr><td>X</td></tr>
    <tr><td>Y</td></tr>
    <tr><td>Z</td></tr>
  </table>
  <table>
    <tr><td>A</td></tr>
    <tr><td>B</td></tr>
    <tr><td>C</td></tr>
  </table>
  <div></div>
</div>
</body>
</html>


#容器{
高度：180像素；
显示器：flex；
柔性流：行；
对齐项目：拉伸；
边框：1px灰色虚线；
}
桌子{
显示器：flex；
柔性流：行；
对齐项目：居中；
利润率：10px；
溢出：滚动；
边框：1px蓝色虚线；
}
运输署{
高度：10px；
宽度：100px；
边框：1px纯红；
}
#货柜组{
弹性：1；
利润率：10px；
边框：1px红色虚线；
}
t车身{
显示：块；
保证金：自动0；
}
A.
B
C
D
E
F
G
H
我
J
K
L
M
N
O
P
Q
R
s
T
U
v
W
X
Y
Z
A.
B
C
看起来行位置的计算是首先执行的，而任何溢出顶部边缘的内容都会被忽略。非常奇怪。我对flexbox不太熟悉，无法解释为什么会发生这种情况。@Oriol-快速回答得很好。：）我也尝试过同样的方法，但不知怎的，我尝试了更多用于
显示的选项为tbody设置参数，并花了一段时间使其工作
block
display。注意：CSS工作组决定更改该行为。现在应该将tbody块化，而不是