Html 对于带有“的表格单元格，这是预期的行为吗？”；显示器：flex&引用；不理会",；rowspan"；属性

考虑下表，该表表示一个图形，用颜色显示单元格区域：

<style>
   .y-axis {
       background-color: red;
       display:flex;
       flex-flow: column-reverse nowrap;
       justify-content: space-between;
   }

   .graph {
       background-color:purple;
       width:300px;
       height:300px;
       border-left:1px solid black;
       border-bottom:1px solid black;
   }

   .x-axis {
       display:flex;
       flex-flow:row nowrap;
       justify-content: space-around;
       background-color:yellow;
   }
</style>
<table style="border-collapse: collapse;">
    <tbody>
        <tr>
            <td rowspan="3" class="y-axis">
                <span>0</span>
                <span>1</span>
                <span>2</span>
                <span>3</span>
            </td>
            <td style="background-color: blue; height:5px;"></td>
        </tr>
        <tr>
            <td class="graph"></td>
        </tr>
        <tr>
            <td style="background-color: blue; height:5px;"></td>
        </tr>
        <tr>
            <td></td>
            <td class="x-axis">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </td>
        </tr>
    </tbody>
</table>

但是随着第一个

div

膨胀，第一个单元格中的所有垂直空间都被消耗掉了

表格单元格是否忽略其

行span

属性的预期行为

如果是这样，是否有CSS唯一的方法来指示后一个代码中的

div

膨胀以占据单元格中的整个垂直空间？（假设当前固定在

300px

的主图形区域（紫色）的高度是可变的，并且是未知的。）

对于带有“display:flex；”的表格单元格，它是否为预期行为 忽略“rowspan”属性

对

原因是

rowspan

属性影响表格单元格

元素，并且仅影响该元素，因此当向其添加

display:flex

时，它将不再是表格单元格

---

在后一段代码中是否有CSS唯一的方法来指示div 是否占用单元格中的整个垂直空间？（假设 主图形区域（紫色），目前固定在300px，将是可变的 和未知的先验知识。）

没有

（好吧，也许，如果其中一个变通方法是一个选项：）

---

我建议不要将

用于布局，可以使用Flexbox实现类似的布局，但有一些值得注意的限制，如下所述：

因此，如果单元格可以具有固定宽度，就像使用

表格布局：fixed

的表格一样，您还可以跨越跨越多个列的元素，类似于

行span

的做法

---

下面是使用Flexbox的一个开始

堆栈片段

.container{
显示：内联块；
}
.flex{
显示器：flex；
}
.flex.column{
弯曲方向：立柱；
}
.flex.column-reverse{
弯曲方向：柱反向；
}
.bkg黄色{
背景颜色：黄色；
}
.bkg黄色跨度{
弹性：1；
}
.bkg紫色{
背景颜色：紫色；
宽度：300px；
高度：300px；
左边框：1px纯黑；
边框底部：1px纯黑；
}
.bkg红色{
背景色：红色；
}
.bkg红色跨度{
弹性：1；
}
.bkg蓝色{
背景颜色：蓝色；
高度：5px；
}

0
1.
2.
3.
1.
2.
3.
4.
5.

使用表格有什么原因吗？在我看来，您似乎无论如何都不会使用表结构。为什么不将您的

样式作为CSS编写呢？它会更容易阅读，为什么你不把你的风格写成CSS呢？它会更具可读性。顺便说一句，如果我删除
显示：flex它的工作原理是required@Dejan.S：与包含多列flex容器的行flex容器相比，我更喜欢一个表。@GalAbra:删除“display:flex；”修复了单元格忽略“rowspan”的问题，但是单元格的内容布局不正确。他们应该在牢房里从下到上垂直伸展。至于将内联样式提取到“style”元素，我似乎更喜欢内联样式，但如果您认为有帮助的话，我会将它们提取出来。单元格的相对宽度大致如后一个示例所示，因此单个flexbox容器是不够的。你知道有什么方法可以使Y轴DIV膨胀到桌子单元格的全部高度吗？这显示了所需的布局，但它是通过手动将Y轴DIV的高度设置为314px（=300+5+5+1+1+1+1）来实现的，并且数字300（图形的高度）在实际实现中是未知的。@COTO不，在表格单元格中动态地执行此操作是不可能的，即使使用绝对定位也是如此。那么为什么需要
？一张桌子就更好了。我不知道如何用少于五个独立的flexbox容器来完成所需的布局。@COTO Figure:）。。。更新了我的答案。如果这两种解决方法都不可行，请告诉我，我将建议一种纯Flexbox解决方案。请投赞成票：）
<style>
   .y-axis {
       background-color: red;
       display:flex;
       flex-flow: column-reverse nowrap;
       justify-content: space-between;
   }

   .graph {
       background-color:purple;
       width:300px;
       height:300px;
       border-left:1px solid black;
       border-bottom:1px solid black;
   }

   .x-axis {
       display:flex;
       flex-flow:row nowrap;
       justify-content: space-around;
       background-color:yellow;
   }
</style>
<table style="border-collapse: collapse;">
    <tbody>
        <tr>
            <td rowspan="3">
                <div class="y-axis">
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                </div>
            </td>
            <td style="background-color: blue; height:5px;"></td>
        </tr>
        <tr>
            <td class="graph"></td>
        </tr>
        <tr>
            <td style="background-color: blue; height:5px;"></td>
        </tr>
        <tr>
            <td></td>
            <td class="x-axis">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </td>
        </tr>
    </tbody>
</table>