仅用CSS根据表格行数差异化设置样式的实现问询

Absolutely! You can handle this entirely with pure CSS—no JavaScript needed. Let me break down how to make this work exactly as you want:

Core Idea #

We can use CSS pseudo-classes to detect if the table has 4 or more rows, then apply different styles to even rows only when that condition is met. For tables with fewer than 4 rows, all rows will keep the same styling.

Modern CSS Solution (Using :has()) #

The :has() selector makes this straightforward—it lets us target tables that contain at least 4 <tr> elements. Here's the code:

CSS #

/* Base table styling (optional but improves visibility) */
.my-table-css {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}

.my-table-css td {
  border: 1px solid #ddd;
  padding: 0.75rem;
}

/* Apply background to even rows ONLY when table has 4+ rows */
.my-table-css:has(tr:nth-child(4)) tr:nth-child(even) {
  background-color: #f8f9fa;
}

How it works: #

• .my-table-css:has(tr:nth-child(4)) targets tables where the 4th <tr> exists (meaning total rows are 4 or more).
• Inside those tables, tr:nth-child(even) selects every even-numbered row and applies the background color.
• For tables with 3 or fewer rows, the :has() condition isn't triggered, so all rows stay styled identically.

Fallback for Older Browsers (No :has()) #

If you need to support browsers that don't yet support :has() (like older Firefox versions), you can use a combination of :nth-child() and :nth-last-child():

.my-table-css tr:nth-child(even):nth-last-child(n+4),
.my-table-css tr:nth-child(even):nth-last-child(n+4) ~ tr:nth-child(even) {
  background-color: #f8f9fa;
}

How this fallback works: #

• tr:nth-child(even):nth-last-child(n+4) selects even rows that have at least 3 rows after them (confirming the table has 4+ total rows).
• The second selector ~ tr:nth-child(even) picks up any even rows that come after the first matched row, ensuring all even rows in the large table get the background.

Example HTML #

Test it out with these sample tables:

<!-- 3-row table (no alternating backgrounds) -->
<table class='my-table-css'>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
</table>

<!-- 4-row table (even rows have background) -->
<table class='my-table-css'>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
  <tr><td>Row 4</td></tr>
</table>

<!-- 5-row table (even rows have background) -->
<table class='my-table-css'>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
</table>

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