Question

我有一个display: flex属性的表，其单元格将垂直居中。当表格中的单元格数量超出表格时，overflow: scroll属性不会考虑顶级单元格。

在下面的示例代码中，滚动停止在字母K处，它应该一直到字母A。这导致了什么？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

根据HTML spec，如果没有<tr>元素，浏览器必须将<tbody>元素包含在<tbody>元素中：

<tbody> is inserted inside <table> (http://jsfiddle.net/ed9msnfp/)

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

但是，<tbody>现在参与了flex布局，而不是表格布局。由于table-row-group是table元素，其父项既不是inline-table也不是flex（它是table），anonymous {{1父生成了。

The <tbody> is wrapped in an anonymous table (http://jsfiddle.net/1wf1hu0d/)

所以现在我们有一个<table>，它是一个带有单个弹性线的弹性容器，它包含一个弹性项（匿名table）。

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

如果弹性容器为single-line并且具有明确的交叉尺寸，柔性线的交叉尺寸是柔性容器的内部交叉大小。

然后你使用align-items: center。这将在弹性线的中间垂直对齐匿名table（与<tbody>一起），即使它在上方或下方溢出。

问题是滚动条允许滚动查看下面溢出的内容，但不能看到溢出的内容。

因此，我建议aligning with auto margins：

而不是align-items: center

在通过justify-content和align-self进行对齐之前，任何正的自由空间都会分配到汽车边距尺寸。

注意区别：自动边距仅分配正可用空间，而不是负空间。

因此，我们只需要使用

设置flex项的样式

margin: auto 0; /* Push to the center (vertically) */

但是有一个问题：如上所述，flex项是一个匿名生成的元素，所以我们不能用CSS选择器选择它。

要解决此问题，我们可以将display: block添加到<tbody>。然后，它不会被包装在任何匿名table元素中，因此它将是一个弹性项目，并且对齐将起作用。

请注意，这不会破坏表格，因为<tr>的{{1}} s群将生成匿名table-row父级，但现在位于{{1}内}}：

An anonymous table is generated inside <tbody> (http://jsfiddle.net/bvjvd30u/)

所以你可以使用这段代码：

table

<tbody>

tbody {
  display: block; /* Disable tabular layout, and make <tbody> a flex item */
  margin: auto 0; /* Push to the center (vertically) */
}

Answer 2

请访问 - https://jsfiddle.net/3y80zqzc/1/

您将观察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>

设置溢出：使用display：flex在桌面上滚动

2 个答案: