样式表取决于行数

Question

仅使用 CSS，是否可以根据行数（或列数）以某种方式设置表格样式

场景，我有一个这样定义的表：

<table class='my-table-css'>
<tr> <td></td></tr> 
........
<tr> <td></td></tr> 
</table>

如果表格中的行数超过三行，我需要将偶数行的颜色与奇数行不同

如果表格中的行少于四行，我需要以相同的方式为偶数行和奇数行着色

表一，偶数行有背景色

       --------------
Row 1  |     |      |
       --------------
Row 2  | BG  | BG   |
       --------------
Row 3  |     |      |
       -------------- 
Row 4  | BG  | BG   |
       --------------

表2，连行都没有背景色

       --------------
Row 1  |     |      |
       --------------
Row 2  |     |      |
       --------------
Row 3  |     |      | 

我只需要使用 CSS 来完成此任务，有来自 CSS 大师的任何想法吗？

Answer 1

这是一个基于this previous answer 的想法，其中唯一的要求是知道每行的高度（我知道在大多数情况下它不是固定的）。您可以轻松将此解决方案扩展到任意数量的行：

table {
 --h:45px; /* Each row will be have a height equal to 45px*/
 --n:3;   /* The condition of number of rows*/
 border-spacing:0;
 background:
    repeating-linear-gradient(to bottom, red 0 var(--h),blue var(--h) calc(2*var(--h))) 0 0/100% calc(100% - var(--h)*var(--n)),
    orange;
  
  margin:10px;
}
table td {
  border:1px solid;
  padding:10px;
  font-size:20px;
}

<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>
<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>
<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>
<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>

Answer 2

你可以试试tr:nth-last-child(2):nth-child(2) {}

只有在有 3 行时才有效。

对于 2 行，将 nth-last-child 的值更新为 1。

table { 
 margin:10px;
}
table tr:nth-child(odd) {
 background:red;
}

table tr:nth-child(even) {
 background:blue;
}

table td {
  border:1px solid;
  padding:10px;
  font-size:20px;
}

table tr:nth-child(2):nth-last-child(2){
  background:red;
}
table tr:nth-child(2):nth-last-child(1) {
  background:red;
}

<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>
<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>
<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>
<table class='my-table-css'>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
  <tr>
    <td>some content here</td><td>some content here</td>
  </tr>
</table>