¿Cómo se especifica el borde inferior de <tr>?

36

intente lo siguiente en su lugar:

<html> 
<head> 
    <title>Table row styling</title> 
    <style type="text/css"> 
    .bb td, .bb th { 
    border-bottom: 1px solid black !important; 
    } 
    </style> 
</head> 
<body> 
    <table> 
    <tr class="bb"> 
     <td>This</td> 
     <td>should</td> 
     <td>work</td> 
    </tr> 
    </table> 
</body> 
</html>

Fuente

2009-09-06 03:53:27

+0

Gracias por su respuesta. Pero no está funcionando. – omg

+0

Me encuentro corregido: try border-bottom: 1px negro sólido; en lugar. –

+0

Todavía no funciona. – omg

6

Debe definir el estilo en el elemento td así:

<html> 
<head> 
    <style type="text/css"> 
     .bb 
     { 
      border-bottom: solid 1px black; 
     } 
    </style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td> 
       Test 1 
      </td> 
     </tr> 
     <tr> 
      <td class="bb"> 
       Test 2 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

Fuente

2009-09-06 04:03:08

+0

¿por qué no se puede modificar tr directamente? – omg

+1

como ** deceze ** dijo: "No se puede aplicar un estilo , ya que solo se trata de un" elemento de agrupación lógica ", pero en realidad no se procesa. Solo puede aplicar estilos a los elementos o dentro del . Asegúrese de tener algunos ". –

+3

Este es un buen enfoque. Lo único que advierto es que el tamaño del renderizado html crecerá en proporción a la cantidad de elementos TD en la tabla a la clase. Si el tamaño es una preocupación, seremos más efectivos al apuntar el elemento de la tabla a la table # idForTable tr td {border-bottom: 1px solid black}. Una cláusula para todo el conjunto de filas. –

22

Añadir border-collapse:collapse a la mesa.

Ejemplo:

table.myTable{ 
    border-collapse:collapse; 
} 

table.myTable tr{ 
    border:1px solid red; 
}

Esto funcionó para mí.

Fuente

2014-01-12 09:29:09

+4

Esta debería ser la respuesta aceptada. Poner el borde en las celdas de la tabla lo rompe. –

+0

Como se dijo antes, esta debería ser la respuesta aceptada. Agregar los elementos a su tabla no hará lo que crea que sucederá. Es decir, si no desea agregar más html a su página y volver a trabajar sus tablas ... esta es la solución más simple que he visto hasta ahora. – greaterKing

1

tr td 
{ 
    border-bottom: 2px solid silver; 
}

o si desea la frontera dentro de la etiqueta TR, se puede hacer esto:

tr td { 
    box-shadow: inset 0px -2px 0px silver; 
}

Fuente

2014-01-23 22:16:14

1

Lo que quiero decir aquí es como una especie de complemento de la respuesta de @Suciu Lucian.

La extraña situación con la que me encontré es que cuando aplico la solución de @Suciu Lucian en mi archivo, funciona en Chrome pero no en Safari (y no lo intenté en Firefox). Después de estudiar la guide of styling table border publicado por w3.org, he encontrado algo alternativo:

table.myTable{ 
    border-spacing: 0; 
} 

table.myTable td{ 
    border-bottom:1px solid red; 
}

Si usted tiene el estilo de la td en lugar de la tr.

Fuente

2016-04-28 07:08:46 Halt

¿Cómo se especifica el borde inferior de <tr>?

Respuesta

Cuestiones relacionadas