Question

我能够将每3行分组为相同颜色，但我希望最后一行与最后一组分组。可以使用CSS吗？

如果只剩下一行，则将其与最后一组分组。所以最后一组是一组4行。

如果末尾有两行，则将其分解，并在列表末尾制作2组4。

tr:nth-child(6n), tr:nth-child(6n-1), tr:nth-child(6n-2) {
background: white;
}
tr:nth-child(6n-3), tr:nth-child(6n-4), tr:nth-child(6n-5) {
    background: grey;
}

Answer 1

不，在CSS中，您无法检查table中剩余的行数。

但是，你可以简单地用JS做。 Here是一个演示。

＆＃13;

var rowCount = $('#table tr').length;
if (rowCount % 3 == 1) {
    $('#table tr:last').css("background", "grey");  
}
else if (rowCount % 3 == 2) {
    $('#table tr:nth-last-child(5)').css("background", "white");   
    $('#table tr:nth-last-child(2)').css("background", "grey");   	 	 $('#table tr:last').css("background", "grey");  
}

＆＃13;

tr:nth-child(6n-3), tr:nth-child(6n-4), tr:nth-child(6n-5) {
    background: grey;
}

＆＃13;

<table id="table">
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
    </tr>
    <tr>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
    </tr>
    <tr>
        <td>10</td>
    </tr>
    <tr>
        <td>11</td>
    </tr>
</table>

＆＃13;

CSS使用相同的背景颜色将每3行组合在一起并调整最后或最后两行

1 个答案: