CSS3 如何使 DIV 展开以填充表格单元格？

CSS3 Solution for Filling a DIV within a Table Cell

Expanding on the classic question of making a DIV fill a table cell, we delve into the world of CSS3 to explore contemporary solutions.

The Challenge

传统的解决方案，如设置 DIV 的宽度和高度为 100%，不再适用于现代浏览器。我们需要一种更优雅的方法，能动态地适应不同的表单元格尺寸。

CSS3 Savior

CSS3 introduces the concept of "inheriting" properties. By cleverly manipulating the height properties of the TR (table row) and TD (table data) elements, we can effectively force a DIV within a TD to fill the entire cell.

Solution

1. Define the TR with a fake height, such as 1px. This height is ignored by browsers anyway.
2. Set the TD's height to "inherit," which tells the TD to adopt the height of its parent (the TR).
3. Set the DIV's height to "100%."

This technique allows the DIV to inherit the inherited height of the TD, which is dynamically determined by the content of the cell.

Browser Compatibility

This solution has been tested and confirmed to work in both IE Edge and Chrome.

Example Code

以上是CSS3 如何使 DIV 展开以填充表格单元格？的详细内容。更多信息请关注PHP中文网其他相关文章！