
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