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