How Can I Make a DIV Element Fill the Entire Width and Height of a Table Cell Using CSS?

Achieving Full-Width and Height DIVs in Table Cells with CSS

This question has persisted unresolved for years. However, with CSS3, we can revisit the challenge and explore how to extend a DIV to fill the entire width and height of a table cell.

The crux of the problem lies in the dynamic nature of the cell dimensions and the limited responsiveness of 100% values. To overcome this, the solution involves a clever trick.

First, assign a non-zero height (for example, 1px) to the table row. This trick triggers the browser's recognition of the row height, allowing for subsequent control.

Next, set the DIV height to 100%, which now becomes relative to the established row height. This ensures that the DIV dynamically expands to fill the cell vertically.

To match the DIV's width, the cell's width can be explicitly specified using CSS or automatically sized based on its content.

Applying these rules ensures that the DIV fills the entire table cell's dimensions, regardless of their initial or dynamic values.

Here is an example CSS snippet:

table {
  width: 200px;
}

tr {
  height: 1px;
}

td {
  height: inherit;
}

div {
  height: 100%;
}

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