HTML rowspan conflict with css elements

Question

I guess my code would speak for itself.

Box number 8 is not exceptional from all the others [ - except td:not(:nth-child(2)) -]. I guess it's conflicting with my table rowspan somehow but I can't figure out why is that.

My goal so the table would look like this:

***
* *
* *

I guess tiny tweak needed here :-)

user_8620333 · Answer

Use the rowspan attribute as selector instead of nth-child

* {
  margin: 0;
  padding: 0;
}

:root {
  --color1: #c83349;
  --color2: #fff;
}

table {
  border-spacing: 0;
  border: 1px solid purple;
  margin: 10px auto;
  text-align: center;
  width: 300px;
  border-bottom: none;
}

tr, th, td {
  width: 100px;
  height: 100px;
}

th,
td:not([rowspan]) {
  background: repeating-linear-gradient(45deg, var(--color2) 25% 50%, var(--color1) 50% 75%);
}

tr:last-child td {
  border-bottom: 1px solid purple;
}

td[rowspan] {
  border: 1px solid purple;
  border-bottom: none;
}

user_9877289 · Answer

when you were applying background with th, td:not(:nth-child(2)), you were excluding the second child element (td), And the last row has only two elements so it obviously doesn't apply to the last element. Here is a similar version that you were using but I prefer to use id/class to exclude a particular element.

HTML rowspan conflict with css elements

2 Answers