<style>
.gridview
{
border-collapse: collapse;
margin: 0px 10px 10px 0;
box-shadow: 3px 3px 4px #bbb;
}
.gridview, .gridview td, .gridview th
{
border: 1px solid #cccccc;
}
.gridview th
{
text-align: left;
/*font-size: 1.2em;*/
font-weight: normal;
color: #F9F9F9;
background: #337EB5;
}
.gridview th a, .gridview th a:link, .gridview th a:visited, .gridview th a:active
{
color: #F9F9F9;
text-decoration: none;
}
.gridview th a:hover
{
text-decoration: underline;
}
.gridview tr
{
background: #F4F9FD;
}
.gridview tr:nth-child(odd)
{
background-color: #F4F9FD;
}
.gridview tr:nth-child(even)
{
background-color: #EDF5FC;
}
.gridview td
{
font-weight: normal;
text-align: left;
vertical-align: top;
}
.gridview td, table th
{
padding: 5px 8px;
}
.gridview tfoot td
{
background-color: #EEEEEE;
}
.gridview tfoot td .page
{
color: #000000;
font-weight: bold;
}
.gridview tr.subfoot, .gridview tr.subfoot td
{
background-color: #FFFFEC;
}
.gridview tr:hover td, .gridview tbody tr:hover td
{
background-color: #FFFFD7;
color: #696969;
}
.gridview .selected, .gridview tbody .selected
{
background-color: #6ccbfb;
color: #fff;
}
</style>
<script>
function toggleClass(el, className) {
if (el.className.indexOf(className) >= 0) {
el.className = el.className.replace(className,"");
}
else {
el.className += className;
}
}
</script>
<table class="gridview">
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
<tr onclick="toggleClass(this,'selected');">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
</tr>
<tr onclick="toggleClass(this,'selected');">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
</tr>
<tr onclick="toggleClass(this,'selected');">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
</tr>
<tr onclick="toggleClass(this,'selected');">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
</tr>
<tr onclick="toggleClass(this,'selected');">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
</tr>
<tr onclick="toggleClass(this,'selected');">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
</tr>
<tr onclick="toggleClass(this,'selected');">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
</tr>
</table>