CSS 表格 td 内的 div 高度怎样自动适应 100%

在网页设计中，经常会遇到需要让 CSS 表格 td 内的 div 高度自动适应 100%的情况。这一需求看似简单，实际操作起来却存在一些挑战。

要理解为何会有这样的需求。在复杂的页面布局中，表格常常用于组织信息，而在表格单元格（td）内放置 div 来进行更细致的样式设计与内容排版是常见做法。当希望 div 能完全填充 td 的高度，实现页面的整齐与美观时，就需要让 div 高度自动适应 100%。

实现这一目标的方法有多种。一种常用方式是利用 CSS 的 display 属性。将 td 的 display 设置为 table-cell，并且让 div 的 height 设置为 100%。例如：

td {
    display: table-cell;
}
div {
    height: 100%;
}

这种方法的原理在于，将 td 设置为 table-cell 显示模式后，它会如同一个独立的表格单元格一样，为内部元素提供稳定的布局环境，此时 div 设置 height: 100% 就能相对 td 的高度进行自适应。

另一种方式是使用 Flexbox 布局。为表格或包含 td 的父元素设置 display: flex，然后让 td 内部的 div 自适应高度。代码示例如下：

/* 父元素设置 Flexbox 布局 */
.parent {
    display: flex;
}
td {
    /* 必要样式 */
}
div {
    height: 100%;
}

Flexbox 提供了强大的布局能力，通过这种方式能更灵活地控制元素的排列与尺寸。

不过在实际应用中，可能会遇到一些问题。比如，td 内部可能存在边距或边框，这可能会影响 div 高度的自适应。此时，可以通过调整盒模型相关属性，如 box-sizing 来解决。将 box-sizing 设置为 border-box，可以让元素的宽度和高度包含内容、内边距和边框，避免布局冲突。

让 CSS 表格 td 内的 div 高度自动适应 100%需要综合运用多种 CSS 技术，根据实际情况选择合适的方法，并解决可能出现的问题，才能打造出理想的页面布局效果。