2

Tengo la siguiente tabla HTML, quisiera que entre la celda que contiene el 1 y el 2 no exista una línea de separación, pero si que exista una línea entre el 1 y el 3, ¿es posible esto?.

Debo utilizar solo https://www.w3.org/TR/REC-html40/ porque es para poner en un mail, no una pagina HTML. Adjunto mi código:

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-0lax {
  text-align: left;
  vertical-align: top
}
<table class="tg">
  <thead>
    <tr>
      <th class="tg-0lax" colspan="3">1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-0lax">2</td>
      <td class="tg-0lax" colspan="2">3</td>
    </tr>
  </tbody>
</table>

1 respuesta 1

1

Si es posible, fácilmente ingresas al th y le quitas el borde inferior, dándole 0px, así no tendrá borde debajo:

.tg th {
  border-bottom: 0px;
}

Y luego al primer td (que es el número 2), le das un color blanco al borde superior (con nth-of-type(1) ingreso al primer td):

.tg td:nth-of-type(1) {
  border-top-color: white;
}

Ejemplo:

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-0lax {
  text-align: left;
  vertical-align: top
}

.tg th {
  border-bottom: 0px;
}

.tg td:nth-of-type(1) {
  border-top-color: white;
}
<table class="tg">
  <thead>
    <tr>
      <th class="tg-0lax" colspan="3">1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="tg-0lax">2</td>
      <td class="tg-0lax" colspan="2">3</td>
    </tr>
  </tbody>
</table>

2
  • Hola, muchas gracias por tu ayuda. Me sirvió, lo unicco que utilicé border-top: 0px para el td en vez de white y funcionó. Saludos!
    – Walter
    el 9 abr. a las 2:14
  • No hay de que, saludos. el 10 abr. a las 14:41

Tu Respuesta

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

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