1

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.

9
  • En que TR no quieres bordes ??? Una imagen ejemplo explicaria mas
    – Excorpion
    Commented el 4 ene. 2023 a las 19:25
  • En el TR que tiene los días de la semana: el primero de la tabla. Perdón si no se entiende, me acabo de registrar en esta página pero si la había visitado algunas veces. No quise poner una imagen porque me pareció que no se iba a entender en comparación de si la página daba la posibilidad de ejecutar el código que escribí junto con la pregunta. pero creo que no aparece esa opción porque no escribí la estructura del html.
    – Ezequiel
    Commented el 4 ene. 2023 a las 20:00
  • Mejor con imagen btw, al menos para CSS. El tr de los dias, es el de lunes... domingo, no ?? y que bordes quieres quitarle ?
    – Excorpion
    Commented el 4 ene. 2023 a las 20:03
  • Disculpas otra vez. Ahí vi que sí se puede ejecutar el código para que muestre la tabla. Así como la muestra es como yo quiero que se vea: que la fila de los días de la semana tenga todo el fondo negro y que no haya bordes de otro color entre sus celdas (quedaban del mismo color que la fuente). El problema que tengo es que para que se vea así tuve que ir por cada TD de ese TR, especificando que no quería que tengan bordes. Buscaba algo más general, que solamente lo tenga que escribir una vez, como cuando configuré el color de fuente y de fondo a TD pero aplicándoselo al TR.
    – Ezequiel
    Commented el 4 ene. 2023 a las 20:05
  • 1
    Si asi como se vee actualmente, es como la quieres, no la pongas de ese modo. Editala, y coloca "el problema", el error es lo que se necesita ver. Puedes tener mas info de este tema en ejemplo mínimo verificable
    – Excorpion
    Commented el 4 ene. 2023 a las 20:07

1 respuesta 1

0

Me adelanto a tu edición para la modificación que creo que buscas...

He quitado esos border: none; de los TR mencionados, y si, queda un blanco horrendo...

Todo esto se corrige aplicando una clase al TR que quieres acceder, y tocando los TD que sean hijos de este. Ahí podes aplicarle el estilo que quieras.

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;
}

.sinBordes td{ /* Nueva clase */
  border: none; /* Mismo estilo */
}
<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;" class="sinBordes">
    <td>D</td>
    <td>L</td>
    <td>M</td>
    <td>M</td>
    <td>J</td>
    <td>V</td>
    <td>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>

2
  • Ah si. Calculaba que esa iba a ser una forma, porque vi ese sistema varias veces. Pasa que como no estoy tan familiarizado con eso de las clases. Gracias
    – Ezequiel
    Commented el 4 ene. 2023 a las 20:34
  • Recuerda marcar la respuesta si es que te ha servido y un +1 para mi ego XD
    – Excorpion
    Commented el 4 ene. 2023 a las 20:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.