Html 工作台宽度

我觉得这种行为有点奇怪

我有这样一个结构

        <div class="canvas">
            <div class="table">
                <div class="row">

                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>

                </div>
            </div>
        </div>

其中，

.table

，

行

，

单元格

为

显示：table

，

表格行

和

表格单元格

假设一个单元格的固定宽度为100px，画布的宽度为250px，并且

溢出：隐藏

，则行中的最后一个单元格将分解。表似乎继承了画布的宽度。从未在任何地方定义过它

为什么

table

不仅仅是随着it单元的增长而增长？我的意思是这是一张桌子，我不想让一排排的人分开。如果我想要的话，我会用div

我怎样才能让桌子表现得像我预期的那样

---

谢谢。

考虑这3个示例，前两个示例有一个周围的div，其中最后一个示例使用“最小宽度”，最后一个示例（3:rd）没有任何div

所有3个“组”都有一个带有

显示：table

的div和一个普通table元素

据我所知，他们的行为都是他们应该做的，所以要回答你的问题：

正确的做法是，表上没有定义宽度，但其父表上有一个宽度，然后设置一个边界，表将尝试适应该边界。还有一个宽度设置为一个单元格，它试图适应它。这会使（显然是这样）表格的单元格断线

如果删除所有的

width/min width:*px

，那么它将开始增长，正如我猜想的那样，但只会一直增长到它到达下一个边界，在这种情况下，它就是主体，在那里，它将再次开始断线

你希望他们表现如何

.canvas{
宽度：250px；
溢出：隐藏；
}
.canvas.min-width{
宽度：自动；
最小宽度：250px；
}
.桌子{
显示：表格；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
宽度：100px；
垂直对齐：顶部；
}

嘿
Heyyyyy 2
Heyyyyy 33333333444444444555555555
嘿
Heyyyyy 2
Heyyyyy 33333333444444444555555555

嘿
Heyyyyy 2
Heyyyyy 33333333444444444555555555
嘿
Heyyyyy 2
Heyyyyy 33333333444444444555555555

嘿
Heyyyyy 2
Heyyyyy 33333333444444444555555555
嘿
Heyyyyy 2
Heyyyyy 33333333444444444555555555

您不应该在表中使用

溢出

，因为它实际上只用于块元素。@Chris但他不在表中使用它，而是在周围的分区中使用它。。。那么你的意思是它也不能在那里使用吗？画布是

display:block