CSS display table 自适应高度、宽度问题的解决
1.介绍
在前端开发中，我们经常需要使用CSS来布局网页元素。当涉及到创建表格布局时，通常使用HTML表格来完成。然而，在某些情况下，我们可能更喜欢使用CSS中的display属性值为table/table-cell/table-row来进行元素布局。这种方法更加灵活且易于管理。但是，使用display属性进行表格布局时，我们可能会遇到自适应高度、宽度的问题。
2.自适应高度问题的解决
当我们将元素的display属性值设置为table时，该元素会像HTML表格一样自动撑开父容器的高度。但是，在以下情况下，我们可能会遇到自适应高度的问题：
当子元素包含文本内容时，父容器的高度无法自动扩展以适应文本内容。
当子元素拥有固定高度时，父容器的高度无法跟随子元素的高度自适应。
为了解决这些问题，我们可以使用CSS中的display属性值为table-cell的方法。将父容器的display属性设置为table，将子元素的display属性设置为table-cell，可以使子元素自动填充父容器的高度。下面是一个示例：
.container {
display: table;
}
.child {
display: table-cell;
}
在上面的代码中，父容器类名为.container，子元素类名为.child。通过为父容器设置display: table，为子元素设置display: table-cell，子元素将自动填充父容器的高度。
3.自适应宽度问题的解决
与自适应高度类似，当我们将元素的display属性值设置为table时，该元素会自动撑开父容器的宽度。但是，在以下情况下，我们可能会遇到自适应宽度的问题：
当子元素的宽度超过父容器的宽度时，子元素会自动换行，导致父容器宽度无法自适应。
为了解决这个问题，我们可以使用CSS中的white-space属性来控制子元素的换行行为。可以将white-space的属性值设置为nowrap，使子元素内容不换行，并且自适应父容器的宽度。下面是一个示例：
.container {
display: table;
white-space: nowrap;
}
.child {
display: table-cell;
}
在上面的代码中，父容器类名为.container，子元素类名为.child。通过为父容器设置display: table以及white-space: nowrap，子元素将自动填充父容器的宽度，并且内容不会自动换行。
4.总结
通过使用CSS中的display属性值为table/table-cell/table-row，我们可以实现灵活且易于管理的表格布局。来自于HTML表格的自适应高度和宽度问题在使用display属性进行表格布局时仍然存在。但是，通过为父容器设置display: table，为子元素设置display: table-cell，以及使用white-space属性来控制子元素的换行行为，我们可以解决这些问题。