imagenes - tablas en html5

El borde alrededor del elemento tr no se muestra?

Question

Parece que Chrome / Firefox no hace bordes en tr , pero representa el borde si el selector es table tr td .

¿Cómo puedo establecer un borde en un tr?

Mi intento, que no funciona:

HTML

<table>    
    <tbody>
        <tr>
            <td>
                Text
            </td>
        </tr>
    </tbody>
</table>

CSS

table tr
{
    border:1px solid black;
}

http://jsfiddle.net/edi9999/VzPN2/

Esta es una pregunta similar: Establecer borde a tabla tr, funciona en todo excepto en IE 6 y 7 , pero parece funcionar en todas partes, excepto en IE.

Answer 1

Agregue esto a la hoja de estilo:

table {
  border-collapse: collapse;
}

JSFiddle .

La razón por la que se comporta de esta manera en realidad se describe bastante bien en la especificación :

Hay dos modelos distintos para establecer bordes en celdas de tabla en CSS. Uno es más adecuado para los denominados bordes separados alrededor de celdas individuales, el otro es adecuado para bordes que son continuos desde un extremo de la mesa hasta el otro.

... y más tarde, para la configuración de collapse :

En el modelo de borde colapsado, es posible especificar los bordes que rodean la totalidad o parte de una celda, fila, grupo de filas, columna y grupo de columnas.