Div-table CSS样式难题：如何使Div模拟表格的行高度统一？

Hey there! Let's get that div-based table looking consistent. The issue you're facing usually comes down to not having the right hierarchy of display properties for your div structure—let me break this down step by step.

The Core Problem #

When simulating a table with divs, you need to mirror the native table's structure exactly:

• A top-level container acting as the <table>
• Child elements acting as <tr> (table rows)
• Grandchild elements acting as <td> (table cells)

If you were setting table-cell on your column containers without wrapping them in proper table-row elements, or missing the top-level table wrapper, the browser can't properly sync row heights.

Working Solution Code #

Here's a corrected structure and CSS that will make your category and product rows match heights automatically:

HTML Structure

<!-- Top-level table container -->
<div class="product-table">
  <!-- Category row -->
  <div class="table-row category">
    <div class="table-cell">Category 1</div>
    <div class="table-cell">Category 2</div>
    <div class="table-cell">Category 3</div>
  </div>
  <!-- Product row -->
  <div class="table-row product">
    <div class="table-cell">Product A</div>
    <div class="table-cell">Product B (with longer content to test height)</div>
    <div class="table-cell">Product C</div>
  </div>
</div>

CSS Styles

.product-table {
  display: table;
  width: 100%; /* Optional: Set a width to match your layout */
  border-collapse: collapse; /* Optional: Merge borders like native tables */
}

.table-row {
  display: table-row;
  /* Don't set fixed heights here—let the browser calculate based on content */
}

.table-cell {
  display: table-cell;
  padding: 10px;
  border: 1px solid #ccc; /* Optional: Add borders for clarity */
  vertical-align: middle; /* Optional: Vertically center content */
}

/* Optional styling to distinguish rows */
.category {
  background-color: #f8f8f8;
  font-weight: bold;
}

Key Fixes Explained #

1. Top-level display: table wrapper: This tells the browser to treat the container as a table, enabling all table-related layout behaviors.
2. display: table-row on rows: Each category/product block needs this property so the browser recognizes it as a table row—this is what forces all cells in the row to share the same height.
3. display: table-cell on cells: The individual column elements inside each row get this, so they align properly and inherit the row's height.

Common Pitfalls to Avoid #

• Don't set fixed heights on table-row or table-cell elements—this overrides the browser's automatic height syncing.
• Make sure there are no extra margins on cells or rows (use padding instead for spacing).
• Double-check your nesting: rows must be direct children of the table container, and cells direct children of rows.

This setup will make your div table behave exactly like a native HTML table, with consistent row heights no matter how much content is in each cell.

内容的提问来源于stack exchange，提问作者DesignButtonElement