Zebra table

by salvadoresc

HTML

<table width="210px" border="0" class="search-result">
     <caption>Reportes pendientes</caption>
  <tr>
            <th width="8%" scope="col">Fecha</th>
            <th width="6%" scope="col">Estado</th>
            </tr>
    <tr>
            <td class="table-data">29-Apr-2012</td>
            <td>Inicializado</td>
            </tr>
          <tr>
            <td class="table-data">29-Apr-2012</td>
            <td>Inicializado</td>
            </tr>
          <tr>
            <td class="table-data">29-Apr-2012</td>
            <td>Inicializado</td>
            </tr>
          <tr>
            <td class="table-data">29-Apr-2012</td>
            <td>Inicializado</td>
            </tr>
          <tr>
            <td class="table-data">29-Apr-2012</td>
            <td>Inicializado</td>
            </tr>
      </table>

CSS

.search-result {
    /*margin-right: 17px;
    margin-left: 17px;*/
    border-collapse: collapse;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #6D6E71;
    padding: 0px;
}
.search-result caption {
    font-size: 12px;
    margin-bottom: 4px;
}
.search-result td {
    height: 23px;
    vertical-align: middle;
    margin: 0px;
    /*font-size: 10px;*/
    font-size:11px;
    padding-right: 6px;
    padding-left: 11px;
}
.search-result th {
    text-align: left;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #ebebeb;
    font-size: 11px;
    padding-right: 6px;
    padding-left: 12px;
    background-color: #818286;
    color: #fff;
    padding-top: 3px;
    padding-bottom: 3px;
    font-weight: normal;
    height: 29px;
}
.search-result .centro{
    text-align:center;
}

.search-result a {
    color: #C1282D;
}
.search-result .striped {
    background-color: #ebebeb;
}
.search-result .over , #search-result .over a{
    background-color: #AF1F2A;
    color: #FFF;
}
.search-result .table-data {
    border-right: 1px dotted #CCCCCC;
}
.search-result .tblnxtbutton {
    padding-left: 5px;
}

JavaScript

$(".search-result tr:nth-child(odd)").addClass("striped");
$(".search-result tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});