How Can CSS3 Make a DIV Expand to Fill a Table Cell?

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

Traditional solutions, such as setting the width and height of a DIV to 100%, no longer work in modern browsers. We need a more elegant way to dynamically adapt to different table cell sizes.

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

<table>

The above is the detailed content of How Can CSS3 Make a DIV Expand to Fill a Table Cell?. For more information, please follow other related articles on the PHP Chinese website!