hover en tablas

[morfasto]

Hola, que tal?

Estoy haciendo una tabla con estilo css y estoy teniendo unas cuantas dudas.

Esta es mi tabla:

Código HTML:

<table border="1">
    <tr>
        <th colspan=2>Palabra</th>
        <th>Letras</th>
        <th>Vocales</th>
    </tr>
    <tr>
        <td width="40"></td>
        <td>hola</td>
        <td>4</td>
        <td>2</td>
    </tr>
    <tr>
        <td width="40"></td>
        <td>murcielago</td>
        <td>10</td>
        <td>5</td>
    </tr>
</table>
 

Como se daran cuenta, hay un td en blanco en cada fila, es para hacer una separacion, para que las filas no esten a la misma altura que el th.

Ahora viene el problema, quiero hacer un hover a las filas, pero sin que se haga hover en la primera columna vacia, como hago eso?

Y tambien, como hago para aplicar un estilo a un class que esta dentro de un div que esta dentro de un tr sin ponerle el estilo de frente al class?

Muchas gracias!

[morfasto]

Y tambien, si es que yo le pongo:

tr:hover{
background-color:gray;
}

Solo se pone el background plomo a las celdas, es decir, el color del fondo se divide por cada celda, hay manera de hacer para que el borde de cada celda no influya con este background?

Gracias!

[IsaBelM]

para tu primera pregunta, se trata de usar la pseudoclase :nth-of-type() con la formula (1n+2)

td:nth-of-type(1n+2):hover

la segunda pregunta, me ha dado pereza entenderla

la tercera. prueba a usar la propiedad border

[morfasto]

Con

td:nth-of-type(1n+2):hover

Solo se hace hover a cada una de las columnas menos la primera, lo que yo necesito es hacer hover a TODA la fila MENOS la primera columna, me hago entender?

Muchas gracias!

[IsaBelM]

a ver ahora

tr:hover td:nth-of-type(1n+2)

[morfasto]

Ahora funciona bien!

Esto es lo que puse:

Código:

tr:hover td:nth-of-type(1n+2){
	background-color:gray;
	border-color:gray;
}

Pero el borde sigue sin pintarse de color plomo.

Como debo de hacer para que el borde de pinte de plomo, sin pintar el border del primer campo?

Gracias!

[IsaBelM]

border: 1px solid gray;

se me olvidó comentarte que la pseudoclase nth-of-type es css3 por lo tanto no es admitida en ie8-

[morfasto]

Si, supuse que era css3.

Por otra parte, con border-collapse:collapse; es que arreglo el problema de los borders, ya que aparecen separados.

Otra pregunta, sabes como hacer para que la tabla en algunas filas, la primera columna no este.

Asi como cuando tienes una tabla con 3 columnas y en alguna fila no escribes el <td></td> de la tercera columna y queda un hueco en blanco.

Quiero hacer eso, pero con la primera columna en algunas filas, es posible?

Gracias!

[IsaBelM]

usa selectores de atributos. pongamos por caso que quieres que no aparezcan aquellos el primer td de cada fila. arreglo a la tabla de muestra sería td[width] y usas las propiedades border-color, border-width y border-style. lo mas importante es darle el mismo color de borde que el color de fondo de la tabla

[morfasto]

Nose si me entediste, pero te dejo unas imagenes para que veas a que me refiero.

Código HTML:

<table>
    <tr>
        <th>header1</th>
        <th>header2</th>
        <th>header3</th>
        <th>header4</th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
 

Este codigo hace lo siguiente:
http://imageshack.us/photo/my-images/809/tabla1z.png

Pero lo que yo necesito es esto:
http://imageshack.us/photo/my-images/404/tabla2n.png

Alguna idea?

Muchas gracias por ayudarme IsaBelM!!!

[IsaBelM]

con esto

tr:nth-of-type(2n) td:nth-of-type(1) {
background:#ff0000;
}

y la tabla es esta

<table border="1">
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
</tr>
<tr>
<td></td>
<td>columna2</td>
<td>columna3</td>
<td>columna4</td>
</tr>
<tr>
<td>columna1</td>
<td>columna2</td>
<td>columna3</td>
<td>columna4</td>
</tr>
<tr>
<td></td>
<td>columna2</td>
<td>columna3</td>
<td>columna4</td>
</tr>
<tr>
<td>columna1</td>
<td>columna2</td>
<td>columna3</td>
<td>columna4</td>
</tr>
<tr>
<td></td>
<td>columna2</td>
<td>columna3</td>
<td>columna4</td>
</tr>
<tr>
<td>columna1</td>
<td>columna2</td>
<td>columna3</td>
<td>columna4</td>
</tr>
</table>

[morfasto]

Pero ahi lo que se esta haciendo es cambiarle de color de fondo al primer campo intercalando una fila si una fila no.

Se acerca bastante a lo que necesito, pero todavia no esta 100% bien como lo quiero (tampoco se si se puede o no).

Lo que yo estoy poniendo en el codigo de mi estilo.css es:

Código:

tr:nth-of-type(2n) td:nth-of-type(1) {
background:#ff0000;
}
tr:hover td:nth-of-type(1n+2){
	background-color:gray;
}

Son los codigos que tu me pasaste, pero el problema esta en que cuando yo paso el mouse sobre el campo que esta "eliminado (color de fondo rojo)", la fila igual cambia de color de fondo a plomo, ya que se esta haciendo un hover.

Lo que yo necesito es que no pase eso. Me gustaria hacer para que cuando yo pase el mouse sobre el campo "eliminado", la fila no se haga hover. Se puede?

Gracias!

[IsaBelM]

algo como así y lee este tutorial

td {
background-color: red;
}

tr:nth-of-type(2n) td:nth-of-type(1) { /* escondemos el borde del 1º td de las filas pares */
border: 1px solid;
border-color: #000 #000 #000 #FFF;
background-color: #FFF;
}

tr:nth-of-type(2n+1):hover td { /* filas impares */
background-color: gray;
}

tr:nth-of-type(2n) td:nth-of-type(1):hover ~ td{ /* filas pares. 1º td. se mantiene color original de los demás tds */
background-color: red;
}

tr:nth-of-type(2n):hover td:nth-of-type(1n+2) { /* filas pares. segundo y demás tds */
background-color: gray;
}