HTML table alternate row color example | Grid view CSS

gridview css | css for grid view in asp.net

Hello friends today in this article we will learn how to create beatiful grid view css and alternet row table css .

You can use this css in your project where you show the report in grid view or data list, There you can use my stylist grid view css.

Here i am providing the HTML and CSS Code…

<table class="grid" width="100%" border="0" role="grid" cellpadding="0" cellspacing="0">
  <tr>
    <th height="40" align="center">Name</th>
    <th align="center">Class</th>
    <th align="center">Section </th>
    <th align="center">Father Name</th>
    <th align="center">Mob-No</th>
    <th align="center">Section</th>
    <th align="center">Class Teacher</th>
  </tr>
  <tr>
    <td height="32" align="center">Sonu Singh </td>
    <td align="center">5</td>
    <td align="center">A</td>
    <td align="center">Chandan Singh </td>
    <td align="center">9999999999</td>
    <td align="center">A</td>
    <td align="center">A</td>
  </tr>
  <tr>
    <td height="32" align="center">Satya Rai</td>
    <td align="center">5 </td>
    <td align="center">A</td>
    <td align="center">Sunny Rai </td>
    <td align="center">9999999999</td>
    <td align="center">A</td>
    <td align="center">A</td>
  </tr>
  <tr>
    <td height="32" align="center">Rohan Chauhan</td>
    <td align="center">5</td>
    <td align="center">A</td>
    <td align="center">Ramjatan Chauhan</td>
    <td align="center">9999999999</td>
    <td align="center">A</td>
    <td align="center">A</td>
  </tr>
  <tr>
    <td height="32" align="center">Vivan </td>
    <td align="center">5</td>
    <td align="center">A</td>
    <td align="center">Sandeep Chauhan</td>
    <td align="center">999999999</td>
    <td align="center">A</td>
    <td align="center">A</td>
  </tr>
  <tr>
    <td height="32" align="center">Rohan Chauhan</td>
    <td align="center">5</td>
    <td align="center">A</td>
    <td align="center">Ramjatan Chauhan</td>
    <td align="center">9999999999</td>
    <td align="center">A</td>
    <td align="center">A</td>
  </tr>
  <tr>
    <td height="32" align="center">Satya Rai</td>
    <td align="center">5 </td>
    <td align="center">A</td>
    <td align="center">Sunny Rai </td>
    <td align="center">9999999999</td>
    <td align="center">A</td>
    <td align="center">A</td>
  </tr>
</table>
<style>
    .grid
{
    width:100%;
   -webkit-box-shadow: 0px 0px 35px 0px rgba(120,119,120,1);
-moz-box-shadow: 0px 0px 35px 0px rgba(120,119,120,1);
box-shadow: 0px 0px 35px 0px rgba(120,119,120,1);
}

.grid tr:nth-child(even) {background: #fff}
.grid tr:nth-child(odd) {background: #f8f8f8}
.grid td
{
    border:1px solid #e4e4e4;
    color:#000;
    font-size:13px;
    line-height:30px;
    text-align:center;
}

.grid th
{
    background:#fff;
    text-align:center;
    color:#000;
    line-height:30px;
    font-size:13px;
    font-weight:600;
    border:1px solid #e4e4e4;
}
</style>

Leave a Reply

avatar
  Subscribe  
Notify of