esquema CSS siempre en la primera fila de la tabla en el cromo

en Google Chrome cuando se tiene contorno en una fila de la tabla se obtiene sólo en la primera filaesquema CSS siempre en la primera fila de la tabla en el cromo

manera de utilizar este CSS:

tr { 
     outline:1px solid red; 
    }

podrás hacer el contorno sólo en la primera fila, se puede ver que si se abre este enlace en cromo:

http://jsbin.com/enupey/27/edit

alguien conoce ninguna solución/solución para esto?

Gracias

Fuente

2012-08-11 Omu

Parece que un error para mí, http://code.google.com/p/chromium/issues/detail ? id = 81373, aunque si recuerdo correctamente no deberías realmente confiar en el estilo 'tr' debido a las limitaciones en los navegadores para el diseño del mismo. –

A pesar de que parece ser un error, un poco de google y me encontré con una solución de trabajo como parte de this question

Adición:

display: block;

parece funcionar:

tr 
{ 
    outline:1px solid red; 
    display: block; 
}

El resultado editado se puede ver en here

Jugueteé un poco con el CSS un poco más y se le ocurrió esto:

td 
{ 
    border-top:1px solid red; 
    border-bottom:1px solid red; 
    bottom-padding:-1px; 
} 

table 
{ 
    border-left:2px solid red; 
    border-right:2px solid red; 
    border-top:1px solid red; 
    border-bottom:1px solid red; 
    bottom-padding:-1px; 
}

¿Sería adecuado?

Advertencia: Solo probé esto en Google Chrome para Mac.

Fuente

2012-08-11 18:52:22

funciona pero arruina el diseño de la tabla (notable si tiene un ancho para la etiqueta de la tabla) – Omu

Respuesta editada. La principal diferencia es que utilicé bordes en lugar de contornos. –

agregando 'display: block' es suficiente como probé – UnLoCo

table tag has a rules attribute que le permite definir cómo se "rigen" los bordes en la tabla. Sin embargo, tenga en cuenta que:

El atributo de reglas es compatible con todos los principales navegadores.

Nota: Las reglas del atributo no es compatible con Internet Explorer, versión anterior 9.

Nota: Chrome y Safari muestra este atributo de forma incorrecta: Añaden los bordes exteriores afectadas, además de las fronteras interiores.

Combinando esto con la frame attribute y el CSS de su pregunta original, esto proporciona contornos en caja en cada fila:

<table rules="rows" frame="box">

Outcome

Se puede ver esta enmienda a JSBin here

(probado en Mac Chrome)

(He agregado esto como una respuesta separada porque mi respuesta anterior se centra en CSS, esta solución, usar solo HTML parece lo suficientemente distinto como para separar las respuestas)

Fuente

2012-08-13 22:36:29

Según la [página de la tabla en MDN] (https://developer.mozilla.org/en-US/docs/HTML/Element/table), el atributo' rules' es obsoleto. Además, vea http://w3fools.com/ – thirdender

Esa primera página también dice que no se use la etiqueta

, pero la pregunta la presenta. –

Como dice la página, se desaconseja el uso de la etiqueta 'TABLE' para el diseño. En la teoría del HTML semántico, las tablas tienen el propósito de mostrar datos tabulares (números, figuras), y su uso por esa razón es perfectamente correcto/alentado. La pregunta no establece explícitamente si el propósito es para datos tabulares o no, _pero_ el atributo 'rules' aún está en desuso. – thirdender

Esta no es una respuesta perfecta por algunas razones, pero Lo estoy lanzando como una opción ... Establezca border-collapse: collapse; en el elemento TABLE y bordes de estilo alrededor de cada fila TD y TH elementos. Ver this JSBin para la salida final. Como se basa en border-collapse, no funcionará sin el atributo HTML cellspacing adicional en IE6/7. También podría no dar el mismo efecto que está buscando, si está buscando delinear cada fila individualmente. La solución también depende del uso de los pseudo-selectores :first-child y :last-child, e IE8 no es compatible con :last-child. Esto puede solucionarse agregando "primero" y "último" como clases en ciertos elementos, pero eso no es ideal.

Fuente

2012-08-13 23:20:33 thirdender

Esto funciona como se ha demostrado here, sin que, en mi opinión, ningún efectos secundarios importantes:

tr 
{ 
    display: table-row-group; 
    outline:1px solid red; 
}

Fuente

2012-08-13 23:22:12 ScottS

hay efectos secundarios http://jsbin.com/enupey/23/edit – Omu

Usted puede utilizar el código como el de abajo.

código HTML para la tabla es

<table rules='none'> 

</table>

y cambiar el css con

tr.sel 
{ 
    border:1px solid red; 
}

va a proporcionar la frontera en la prima media en cualquier navegador.

Fuente

2012-08-16 14:30:52

Con display: block que podría hacer:

HTML:

<table> 
    <tr> 
    <td>ads</td> 
    <td>azx</td> 
    <td>bbb</td> 
    </tr> 
    <tr class='sel'> 
    <td>ads</td> 
    <td>azx</td> 
    <td>bbb</td> 
    </tr> 
    <tr> 
    <td>ads</td> 
    <td>azx</td> 
    <td>bbb</td> 
    </tr> 
</table>

CSS:

tr 
{ 
display: block; 
} 

tr.sel 
{ 
    outline: 1px solid red; 
}

y la salida es: http://jsbin.com/enupey/79/edit

Fuente

2012-08-20 07:43:10

-1

ya, es un error

tratar frontera en lugar de contorno, y dan estilo de tabla border-collapse:collapse

ningún cambio en html, css ahora

tr.sel 
{ 
    border:1px solid red; 

} 
table{ 
    border-collapse:collapse; 
}

demostración

fiddle, jsbin

Fuente

2012-08-20 07:51:15

¿Qué sucede si ya uso el borde y quiero un contorno alrededor de él? – Omu

Fix a su problema: Cambiar la CSS para.

tr 
{ 
    outline:1px solid red; 
    display:inherit; 
}

tr 
    { 
    outline:1px solid red; 
    display:block; 
    }

Si son concerned with table layout entonces usted tiene que luchar con los espacios mediante el establecimiento de margin a un valor negativo. ver aquí:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Un fallo ya ha sido reportado seguimiento enlace: http://code.google.com/p/chromium/issues/detail?id=81373&q=outline&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary

Fuente

2012-08-20 13:30:59

mostrar: heredar o bloquear arruina el diseño – Omu

Cuestiones relacionadas