使用CSS display: grid替代HTML <table>标签是否为良好实践？

Great question—this is such a common pain point when bridging traditional table layouts with modern responsive design, especially for complex components like shopping carts with colspan/rowspan! Let’s break this down clearly:

1. 先肯定你的核心观察：Grid确实是复杂表格布局的救星 #

HTML tables were never built for responsive design. Their rigid, content-driven structure makes it nearly impossible to rearrange columns, collapse non-critical content, or adjust layouts on small screens—especially when colspan throws off the column flow.

CSS Grid fixes this entirely:

• Its explicit grid lines and grid-column/grid-row properties let you define cross-cell layouts without being tied to table semantics.
• You can easily rewrite grid rules at different breakpoints (e.g., stack columns on mobile, show full columns on desktop) without breaking the overall structure.
• For shopping carts, this means you can prioritize core info (product name, price) on small screens and tuck away secondary details (SKU, quantity controls) in collapsible sections or rearranged rows.

2. 关于<tr>类行元素的样式处理：本质是结构与语义的平衡 #

Using nth-child works, but it’s fragile—change the number of columns or insert a new row, and your selectors break. Here are the professional approaches to solve this cleanly:

方案一：重构为行级Grid容器（最直观的样式控制） #

Ditch the table structure entirely, and build each row as an independent .cart-row Grid container with .cart-cell children. This approach:

• Lets you style rows directly (e.g., background-color on hover, bottom borders) without relying on child selectors.
• Gives you per-row layout flexibility (e.g., a row with a full-width "apply coupon" button can use grid-template-columns: 1fr instead of matching the main grid).
• Makes responsive tweaks trivial (e.g., switch a row to flex-direction: column on mobile).

Just remember to add ARIA attributes to preserve accessibility:

• Add role="table" to the parent container
• Add role="row" to each .cart-row
• Add role="cell" to each .cart-cell

方案二：保留table语义，用Grid重写布局（兼顾可访问性） #

If you need to keep the table’s native semantics (critical for screen readers), use display: contents to turn <tr>, <thead>, and <tbody> into "ghost containers"—they retain their semantic meaning but don’t interfere with Grid layout:

.cart-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  width: 100%;
}

/* Make table structural elements invisible to layout */
.cart-table thead,
.cart-table tbody,
.cart-table tr {
  display: contents;
}

.cart-table th,
.cart-table td {
  padding: 12px;
  border: 1px solid #eee;
}

/* Style "rows" by targeting their child cells */
.cart-table tr:nth-child(even) td {
  background-color: #f9f9f9;
}

Here, nth-child is still usable, but it’s far more stable because we’re targeting <tr> elements directly—their order won’t break if column counts change.

进阶技巧：用CSS变量替代nth-child（dynamic row styling） #

For dynamic layouts where rows might be added/removed or reordered, use custom CSS variables to mark rows instead of relying on position:

<tr style="--row-id: 1">
  <td>Product 1</td>
  <td>$19.99</td>
</tr>
<tr style="--row-id: 2">
  <td>Product 2</td>
  <td>$29.99</td>
</tr>

Then style rows using variable selectors:

tr:where([--row-id="2"]) td {
  background-color: #f9f9f9;
}

This completely decouples styling from row position, making your code far more robust.

3. Final Recommendations #

• Prioritize CSS Grid for complex responsive table-like layouts—it’s the most flexible solution by far.
• For row styling:
  • Use row-level Grid containers + ARIA if you don’t need table semantics (cleanest, easiest to maintain).
  • Use display: contents + nth-child if you need to preserve table accessibility.
  • Avoid over-reliance on nth-child; use CSS variables for dynamic or frequently updated layouts.

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