Agregar borde inferior a la fila de la tabla <tr>

Resuelto Sangram Nandkhile asked hace 12 años • 18 respuestas

Tengo una tabla de 3 por 3. Necesito una forma de agregar un borde para la parte inferior de cada fila try darle un color específico.

Primero probé la forma directa, es decir:

<tr style="border-bottom:1pt solid black;">

Pero eso no funcionó. Entonces agregué CSS así:

tr {
border-bottom: 1pt solid black;
}

Eso todavía no funcionó.

Preferiría usar CSS porque así no necesito agregar un styleatributo a cada fila. No he agregado ningún borderatributo al <table>. Espero que eso no esté afectando mi CSS.

Apr 06 '12 15:04 Sangram Nandkhile

Aceptado

Añade border-collapse:collapsea tu tabla la regla:

table { 
    border-collapse: collapse; 
}

Ejemplo

table {
  border-collapse: collapse;
}

tr {
  border-bottom: 1pt solid black;
}

<table>
  <tr><td>A1</td><td>B1</td><td>C1</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>

Expandir fragmento

Enlace

Apr 06 '2012 08:04 Nathan Manousos

Tuve un problema como este antes. No creo que trpueda adoptar un estilo de borde directamente. Mi solución fue diseñar las tds en la fila:

<tr class="border_bottom">

CSS:

tr.border_bottom td {
  border-bottom: 1px solid black;
}

Apr 06 '2012 08:04 tsherif