¿El borde alrededor del elemento tr no se muestra?


107

Parece que Chrome / Firefox no trprocesa los bordes , pero muestra el borde si el selector lo está table tr td.

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

Mi intento, que no funciona:

table tr {
  border: 1px solid black;
}
<table>
  <tbody>
    <tr>
      <td>
        Text
      </td>
    </tr>
  </tbody>
</table>

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

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


2
Estoy usando Firefox y no veo un borde
Speedysnail6

Respuestas:


255

Agregue esto a la hoja de estilo:

table {
  border-collapse: collapse;
}

JSFiddle .

La razón por la que se comporta de esta manera 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 llamados bordes separados alrededor de celdas individuales, el otro es adecuado para bordes que son continuos desde un extremo de la tabla hasta el otro.

... y más tarde, para collapseconfigurar:

En el modelo de borde colapsante, es posible especificar bordes que rodeen todo o parte de una celda, fila, grupo de filas, columna y grupo de columnas.


2
¿Por qué exactamente estaba oculta la frontera?
edi9999

4
Porque así es como funciona separate, por defecto, el modelo de borde de tabla: usted especifica bordes para cada celda. Actualizaré la respuesta con citas de la documentación.
raina77ow

1
@ edi9999 - Recomiendo usar una hoja de estilo de reinicio. Mira esto http://www.cssreset.com/
Black Sheep

2
La explicación específica de por qué se ocultó el borde es esta declaración en la especificación CSS citada, presentada como aplicable en el modelo de bordes separados: "Las filas, columnas, grupos de filas y grupos de columnas no pueden tener bordes (es decir, los agentes de usuario deben ignorar el borde propiedades para esos elementos) ".
Jukka K. Korpela

Jugar con su ejemplo de violinista ayudó, gracias;)
Zeek2
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.