Hola estos intentando sombrear una tabla, en las filas pares e impares, pero sombrea todas las filas por igual.
El código CSS es el siguiente:
.tablecuando {
width: 70%;
margin-left: 10px;
margin-right: auto;
background:none;
float: left;
clear:left;
}
.tablecuando table {
width: 70%;
text-align: center;
margin: auto;
border: 0px solid #000;
border-collapse: collapse;
caption-side: top;
}
.tablecuando tr td:nth-last-child(odd) {
background-color: #E3FBFB;
}
.tablecuando tr td:nth-last-child(even) {
background-color:white;
}
.tablecuando caption {
width: auto;
padding: 7px 5px 7px 5px;
vertical-align: midle;
font-size: 12px;
border: 0px solid Black;
color: #0000FF;
Background: #EB8921;
/*Background: #F0F8FF;*/
}
.tablecuando table tr {
font-family: Calibri, Arial;
text-align: center;
vertical-align: midle;
border: 1px solid #000;
padding: 1px;
color:Black;
font-weight:bold;
font-size:12px;
}
.tablecuando table th {
font-family: Calibri, Arial, Bold;
text-align: center;
vertical-align: midle;
border: 1px solid #000;
padding: 1px;
color:#0000FF;
font-weight:bold;
font-size:12px;
background: #EB8921;
}
.tablecuando table td {
text-align: center;
vertical-align: midle;
border: 1px solid #000;
padding: 0.3em;
color:green;
font-size:12px;
}
y el codigo de la tabla es :
<div class="tablecuando" >
<table class="table" >
<?php if($user_language=='en' or $user_language=='en-US'){ ?>
<caption>
<div style=" text-align: center; color:#00008B;"><?php echo "<b> List of Horses</b><br/> ";?>
<div style=" text-align: center; color:#00008B;"><?php echo "<b> Touch the Name and you will see the Race</b><br/>";?>
</caption>
<thead>
<tr>
<th width="15%">Name</th>
</tr>
</thead>
<?php }
else
{ ?>
<caption>
<div style=" text-align: center; color:#00008B;"><?php echo "<b> Listado de SPC</b><br/> ";?>
<div style=" text-align: center; color:#00008B;"><?php echo "<b> Toque el Nombre y verá la Carrera</b><br/>";?>
</caption>
<thead>
<tr>
<th width="15%">Nombre</th>
</tr>
</thead>
<?php }
if ($Cont1 > 3) { include('buscarcabanom.php'); }
else
{ include('buscarcabanomex.php'); }
// echo "<font color=yellow> Cantidad: $z </font>";
for ($i = 0; $i < $z; $i++)
{
// echo "<font color=yellow> Fecha: $FechaNac[$i] </font>";
$FechaNac[$i] = explode("-", $FechaNac[$i]);
$Ano[$i] = $FechaNac[$i][0];
// echo "<font color=yellow> Ano: $Ano[$i] </font> <br/>";
?>
<tbody>
<tr>
<td >
<a class="cabaprog" href="webresultados3.php?idcab=<?php echo $idcab[$i] ;?>&orden=1&idi=<?php echo $user_language ;?>" >
<?php if ($ExNombre[$i] == "") { echo "$nomcaba[$i] - $Ano[$i]"; }
else { echo "$nomcaba[$i] (ex $ExNombre[$i]) - $Ano[$i]"; }?></a></td>
<?php
}
?>
</tr>
</tbody>
</table>
</div>
Yo estoy comenzando a hacer esto de las tablas, me gustaría que me puedan guiar
Los Datos que se publican en cada Fila se obtienen de una base de datos MYSQL
Ese sombreado me funciona en algunas tablas y otras no.
Y las estructuras de las tablas son similares, solo cambian la cantidad de columnas
No llego a comprender lo que pasa
Muchas Gracias
Puse esto :
<style>
.cuerpo .celda:nth-of-type(odd) {
background-color: #E3FBFB;
}
.cuerpo .celda:nth-child(even) {
background-color:white;
}
</style>
</head>
y en la Tabla esto:
<tbody Class="cuerpo">
<tr Class="celda">
<td >
<a class="cabaprog" href="webresultados3.php?idcab=<?php echo $idcab[$i] ;?>&orden=1&idi=<?php echo $user_language ;?>" >
<?php if ($ExNombre[$i] == "") { echo "$nomcaba[$i] - $Ano[$i]"; }
else { echo "$nomcaba[$i] (ex $ExNombre[$i]) - $Ano[$i]"; }?></a></td>
<?php
}
?>
el css lo dejé así:
.tablecuando {
width: 70%;
margin-left: 10px;
margin-right: auto;
background:none;
float: left;
clear:left;
}
.tablecuando table {
width: 70%;
text-align: center;
margin: auto;
border: 0px solid #000;
border-collapse: collapse;
caption-side: top;
}
.tablecuando caption {
width: auto;
padding: 7px 5px 7px 5px;
vertical-align: midle;
font-size: 12px;
border: 0px solid Black;
color: #0000FF;
Background: #EB8921;
/*Background: #F0F8FF;*/
}
.tablecuando table th {
font-family: Calibri, Arial, Bold;
text-align: center;
vertical-align: midle;
border: 1px solid #000;
padding: 1px;
color:#0000FF;
font-weight:bold;
font-size:12px;
background: #EB8921;
}
y no me funciona, se ve así:
nth-last-child(odd)
pornth-child(odd)