Quería ver si me podían ayudar con algo de HTML5/CSS3. Hice una tabla con columnas y filas. Después les apliqué a los TD
un padding:0
y la propiedad border-collapse: collapse
(+ ese valor), para que la tabla quede dividida en cuadrículas con un borde en común para cada celda.
Ahora estoy tratando de hacer que un TR
no tenga bordes verticales (cuando le comente lo de los colores van a darse cuenta por qué): no me sirve combinar las celdas porque yo necesito que su contenido quede alineado con el contenido de las demás celdas de su misma columna.
Puedo aplicarle CSS en línea al TR
aplicándole un color de fondo (negro en este caso) y un color de fuente (blanco), pero ese color blanco también se le aplica a los bordes; entonces trato de aplicarle a dicho TR
la propiedad + el valor border: none
, pero no me lo toma, tampoco si quiero aplicarle a los bordes (border-color
) el mismo color que tiene el fondo (negro).
Lo que termino haciendo es aplicarle a cada TD
de ese TR
la propiedad + el valor border: none
. Eso sí me funciona pero tengo que hacerlo para cada uno de los TD
: en este caso no son muchos, pero si lo fueran no sería muy práctico. Les comparto el código de la tabla y el CSS que le apliqué desde una hoja de estilos.
table {
border: solid;
width: 50%;
margin-left: 25%;
margin-top: 30px;
text-align: center;
border-collapse: collapse;
background-color: white;
}
td, th {
border: solid;
padding: 0;
}
th {
background-color: grey;
}
<table>
<th colspan="7"><span style="font-size: 1.2em;">Farmacias de Turno</span><br>Noviembre 2022</th>
<tr style="background-color: black; color: white;">
<td style="border:none;">D</td>
<td style="border:none;">L</td>
<td style="border:none;">M</td>
<td style="border:none;">M</td>
<td style="border:none;">J</td>
<td style="border:none;">V</td>
<td style="border:none;">S</td>
</tr>
<tr>
<td></td>
<td></td>
<td>A1</td>
<td>B2</td>
<td>C3</td>
<td>D4</td>
<td>E5</td>
</tr>
<tr>
<td>F6</td>
<td>G7</td>
<td>H8</td>
<td>I9</td>
<td>A10</td>
<td>B11</td>
<td>C12</td>
</tr>
<tr>
<td>A13</td>
<td>E14</td>
<td>F15</td>
<td>G16</td>
<td>H17</td>
<td>I18</td>
<td>A19</td>
</tr>
<tr>
<td>B20</td>
<td>C21</td>
<td>D22</td>
<td>E23</td>
<td>F24</td>
<td>G25</td>
<td>H26</td>
</tr>
<tr>
<td>I27</td>
<td>A28</td>
<td>B29</td>
<td>C30</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Espero se entienda y puedan ayudarme. Muchas gracias.