Buenas, tengo una dudilla pero es de novato de primeras, así que tampoco se asusten...
Quería hacer una tabla con una de las celdas vacías de contenido y sin borde ni nada, algo así como esto, pero con un color de fondo igual en todas las celdas excepto en la vacía
Pero con los bordes colapsados, y ya que estoy practicando cosillas y tal, quería hacerlo todo sin usar ninguna clase, ni id ni nada por el estilo, e aquí el código que tengo escrito para conseguir algo parecido...
spoiler<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
}
td,
tr,
th {
border: 1px solid black;
}
th ~ th,
td {
background-color: red;
}
tr:nth-child(1) {
border: none
}
th:nth-child(1) {
border: none
}
</style>
<body>
<table>
<tr>
<th></th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
</body>
</html>
Hasta aquí lo conseguí todo bien y al menos da resultado, ya luego que esté bien o no...no se pero el resultado lo da, mi cuestión es:
spoilerPorqué con
tr:nth-child(1) {
border: none
}
th:nth-child(1) {
border: none
}
Funciona lo de quitarle el borde, y no funciona con por ejemplo
tr + th{border:none}
Cuando se supone que aquí estoy eligiendo el primer th que va justo detrás de tr, lo mismo que el th:nth-child,no?
