How Can I Make a DIV Element Fill a Table Cell Using Only CSS?

Using CSS to Make a DIV Fill a Table Cell

One common challenge in web development is getting a DIV element to occupy the entire space within a table cell. Despite the advancements in CSS3, this issue has persisted over the years. This article explores a CSS-based solution to this problem, which accommodates dynamic table cell dimensions.

The traditional approach of setting the DIV's width and height to 100% is often ineffective because table cells do not inherently stretch to fit their content. Instead, we need to manipulate the table and cell properties to achieve the desired outcome.

The following CSS hack provides a simple and efficient way to make a DIV fill an entire table cell:

tr { height: 1px; }
td { height: inherit; }
div { height: 100%; }

In this code, we set the table row (TR) to have a minimal height of 1px (which is generally ignored by the browser). Then, we set the table cells (TDs) to inherit their height from the row, ensuring that they stretch vertically to accommodate the DIV. Finally, we set the DIV's height to 100%, causing it to occupy the entire available space within the table cell.

This solution has been tested and confirmed to work in both IE Edge and Chrome browsers, effectively addressing the issue of filling a DIV with the entire height and width of a table cell.

The above is the detailed content of How Can I Make a DIV Element Fill a Table Cell Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!