Псевдокласс :last-child представляет элемент, который является последним среди дочерних элементов. (тоже самое, что :nth-last-child(1))
.below:last-child в данном случае ничего не найдёт, поскольку ни один из .below не является последним
Как вариант,
<!doctype html>
<html>
<body>
<script>
var table = document.createElement("table");
for(var y = 0; y < 25; y++) {
var tableRow = document.createElement("tr");
table.appendChild(tableRow);
tableRow.classList.add(y < 15 ? "below" : "above");
for(var x = 0; x < 35; x++) {
var tableCell = document.createElement("td");
tableRow.appendChild(tableCell);
}
}
document.body.appendChild(table);
</script>
<style>
table {
border-collapse: collapse;
border: 1px solid gray;
}
tr {
border-color: inherit;
}
td {
border: 1px solid;
border-color: inherit;
width: 15px;
height: 15px;
}
tr:nth-child(-n + 15) td:nth-child(-n + 15) {
border-width: 0;
}
tr:nth-child(n + 16) td:nth-child(-n + 15),
tr:nth-child(-n + 15) td:nth-child(n + 16) {
background-color: #9ad4ac;
}
tr:nth-child(5n + 15) td {
border-bottom-width: 2px !important;
}
</style>
</body>
</html>
Проверка: []