¿Cómo coloco un borde alrededor de una etiqueta tr?

Question

Tengo una muy simple página HTML:

<table> 
    <tr><th>header1</th><th>header2</th></tr> 
    <tr><td>item1</td><td>item2</td></tr> 
    <tr><td>item3</td><td>item4</td></tr> 
</table> 

Con algunos simples css:

tr { 
    border:1px solid blue; 
} 

me esperaría esto para poner un borde alrededor de las tr s pero no pone un borde alrededor en absoluto. ¿Cómo consigo un borde alrededor del tr?

Answer 1

Agregar table { border-collapse: collapse; }.

De the CSS2 specification:

En [el modelo border-collapse: separate], cada célula tiene un borde individual. [...] Las filas, columnas, grupos de filas y grupos de columnas no pueden tener bordes (es decir, los agentes de usuario deben ignorar las propiedades del borde para esos elementos).

Answer 2

Tu código funciona, si quieres un border solo en la fila.

Sin embargo, si usted está mirando para tener la border todas partes, tendrá que hacer esto:

tr, td, th{ 
    border:1px solid blue; 
} 

Ejemplo: http://jsfiddle.net/jasongennaro/83VjH/

Answer 3

fronteras puede ser añadido a las filas de la tabla mediante la adición de frontera para <td> y <th> elementos [Este es básicamente un truco de CSS para lograr (¡hack!) Que como los bordes no se pueden agregar a <tr> y <tbody> elementos de la tabla]. Agregue los siguientes estilos a su CSS para obtener bordes alrededor de las filas o encabezados o celdas de la tabla.

table { 
    border-collapse: collapse; 
} 
table td, table th { 
    border: solid white; 
} 
td { 
    border-color: red (just an example, can be as per your requirement); 
} 

Explicación:

1. regla border-collapse se añade a la tabla entera. Puede tener otras dos propiedades posibles por separado (predeterminado) y heredar. Para sus respectivos efectos refieren https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
2. Segunda regla es decir, la adición de propiedad frontera para <td> (para celdas de datos) y < º > (para células de cabecera) es una necesidad. Si no lo agrega, los bordes no aparecerán. En esta regla, el color del borde es blanco, puede ser de otro color de su elección en lugar de blanco. Básicamente, esta regla activará los bordes alrededor de las celdas de la tabla y dado que el color es blanco, no aparecerá nada.
3. Y, por último, agregue el color de su elección. Esta regla puede ser más específica para aplicar borde a un <td> o una clase de <td>.