Uso del estilo contextual en la tabla para aplicar bordes punteados a celdas específicas

Question

He tenido anteriormente asked a question en este tema, al que ustedes proporcionaron respuestas fantásticas. Desde que "descubrí" el poder embriagador del estilo contextual (http://www.w3.org/TR/css3-selectors/#selectors) - gracias una vez más a todos ustedes - y ahora estoy enganchado.

que he hecho un buen progreso en la aplicación de un estilo contextual para mi diseño actual aquí:

http://jsfiddle.net/gFA4p/200/

me he encontrado con algunos problemas, sin embargo.

Aquí hay una captura de pantalla de lo que estoy tratando de hacer:

Mi primera pregunta, ¿estoy siendo demasiado entusiasta en tratar de aplicar las reglas contextuales y lo que es más difícil de lo que tiene que ser?

Dos, si no, ¿qué debo hacer para lograr mi estilo de destino, según la captura de pantalla?

Tres, cómo hacer que este navegador multiplataforma sea compatible? Incluso como está, parece poco convincente en otros navegadores.

Answer 1

El uso de selectores CSS no es demasiado entusiasta como siempre que permita su código y hojas de estilo HTML sea más sencilla, más fácil de entender y modificar; por ejemplo, con menos atributos className en su HTML.
¡Además, es la mejor manera de aprenderlos!

Para la segunda parte de su pregunta, le sugieren que esto CSS ( http://jsfiddle.net/S8Bne/):

.geniusPicks {} 

.geniusPicks table {width:100%; font-size:12px; border-collapse:separate;} 

.geniusPicks table tr#picksHeading {border:0px solid; height:30px;} 

.geniusPicks table tr#picksHeading th {background:darkRed; color:white; font-weight:bold;} 

.geniusPicks table tr.pickHeading {border:0px solid;} 

.geniusPicks table tr.pickHeading td {background:red; padding-left:10px;} 

.geniusPicks table tr.pickHeading+tr td:last-child {border-right:solid 1px black;} 

.geniusPicks table tr.pickConsensusBody td { 
    border-left:1px solid; 
    border-top:1px solid; 
    background:grey; 
} 

.geniusPicks table tr.pickBody td { 
    border-left:1px solid; 
    border-top:1px solid; 
} 

.bigGap td {height:19px;} 

.smallGap td {height:10px; border-top:solid 1px black;} 

.geniusPicks table th, 
.geniusPicks table th:last-child, 
.geniusPicks table .pickHeading+tr td, 
.geniusPicks table .pickHeading+tr td:last-child {text-align:center;} 


.geniusPicks table th+th+th, 
.geniusPicks table .pickHeading+tr td+td+td {text-align:left;} 

/* Border Left Radius */ 
.geniusPicks table thead tr#picksHeading th:first-child, .geniusPicks table tr.pickHeading td { 
    border-radius:15px 0 0 0; 
    -moz-border-radius:15px 0 0 0; 
    -webkit-border-radius:15px 0 0 0; 
    -khtml-border-radius:15px 0 0 0; 
} 

/* Border Right Radius */ 
.geniusPicks table thead tr#picksHeading th:last-child { 
    border-radius:0 15px 0 0; 
    -moz-border-radius:0 15px 0 0; 
    -webkit-border-radius:0 15px 0 0; 
    -khtml-border-radius:0 15px 0 0; 
} 


.geniusPicks table .pickHeading+tr td:nth-child(4) { 
    border-left-style:dotted; 
    border-left-color:black; 
    border-left-width:1px; 
    border-top-style:solid; 
    border-top-color:black; 
    border-top-width:1px; 
} 

.geniusPicks table tr.pickConsensusBody td:first-child:not([rowspan]), 
.geniusPicks table tr.pickBody td:first-child:not([rowspan]) { 
    border-top-style:dotted; 
    border-top-color:black; 
    border-top-width:1px; 
    border-left-style:dotted; 
    border-left-color:black; 
    border-left-width:1px; 
}

Lo bueno de esta solución es que no requiere modificar el código HTML en absoluto.

Sin embargo, los bordes que deben puntearse permanecerán sólidos si el navegador (por ejemplo, IE8) no es compatible con la pseudoclase CSS3 :nth-child o :not.

Dime si prefieres algo que dependa solo de CSS2. Pero en ese caso será necesario agregar un atributo class a cada celda que tenga puntos, o dividir cada fila que tenga 7 celdas para que cada celda "vlah" se convierta en el primer elemento secundario de su fila.

Answer 2

No creo que pueda lograr esto sin poner algunas clases en etiquetas TR y TD apropiadas en su HTML. En this fiddle he agregado la clase de primero a cada TR de primera fila, la clase de última a cada TR de última fila, y la clase de punteada a las celdas que deben puntearse. Luego, con los siguientes estilos adicionales, puedo mostrar lo que buscas.

.geniusPicks table td.dotted {border: 1px dotted black !important;} 
.geniusPicks table tr.first td.dotted {border-top: none !important;} 
.geniusPicks table tr.last td.dotted {border-bottom-style: solid !important;} 
.geniusPicks table tr.pickBody.first td.dotted {border-top: 1px solid black !important;} 

Answer 3

En respuesta a su primera pregunta, sí, creo que está siendo demasiado entusiasta. En lugar de preocuparse por las fronteras punteadas o sólidas, ¿por qué no dedicar el tiempo a hacer que el contenido sea más fácil de leer? & legible.

El estilo actual (color & bordes negros sólidos) en su ejemplo abruma el contenido real. Algunos recursos:

• http://www.uxmatters.com/mt/archives/2005/11/so-the-necessary-may-speak.php
• http://www.lukew.com/ff/entry.asp?550
• http://designshack.co.uk/articles/10-css-table-examples