Automatic Serial Number & Zebra Striping in HTML Table Rows with CSS

Automatic Serial Number & Zebra Striping in HTML Table Rows with CSS

In this Post We Will Explain About is Automatic Serial Number & Zebra Striping in HTML Table Rows with CSS With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Automatic Serial Number Row in HTML Table Example

In this post we will show you Best way to implement Dynamic table with CSS Serial numbers, hear for Super easy zebra-striped tables using CSS selectors with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   How to display/load JSON File using PHP with MySQLi




We shell Learn simple main DOM HTML table source code and We are Empty empty first table td of every table row, here simple HTML table automatically print means displayed generated line by line serial number will use that here empty html table td.

The HTML

<table class="live-auto-serial">
<thead>
<tr>
 <th>Sr. No</th>
 <th>Student Name</th>
 <th>Student Class</th>
</thead>
<tbody>
<tr>
 <td> </td>
 <td>Student Name 1</td>
 <td>Student Class 1</td>
</tr>
<tr>
 <td> </td>
 <td>Student Name 2</td>
 <td>Student Class 2</td>
</tr>
<tr>
 <td> </td>
 <td>Student Name 3</td>
 <td>Student Class 3</td>
</tr>
<tr>
 <td> </td>
 <td>Student Name 4</td>
 <td>Student Class 4</td>
</tr>
</tbody>
</table>

We want to table dynemic CSS style apply this only above simple HTML table so We give class custom css to this HTML table Therefor that it step by step works only for the above custom CSS style class table not all HTML tables in your web application page for Automatic Serial Number.

Also Read :   JavaScript Automatically Page Redirection

The CSS

body {
//fonts name
 font-family: "Open Sans", helvetica, arial;
 }
table{
 width: 800px;
 border-collapse: collapse;
 margin: 25px 0px 25px;
 background-color: #3d3d3d;
 font-size: 15px;
 }
table tr {
 height: 45px;
 }
table th {
 background: #c60000;
 color: #3d3d3d;
 font-weight: bold;
 font-size: 19px;
}
table td, th {
 padding: 7px 7px 7px 10px;
 border: 2px solid #ccc;
 text-align:center;
}
/* CSS Automatic Serial Number Row in HTML Table*/
table tr:nth-of-type(odd) {
 background: #e3e3e3;
}
 
/* HTML CSS Automatic Serial Number*/
.live-auto-serial {
 counter-reset: serial-number; 
}
/* Automatic Serial Number using CSS*/
.live-auto-serial td:first-child:before {
 counter-increment: serial-number; 
 content: counter(serial-number); 
}

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read :   AngularJS ForEach Function - Angular Foreach Examples





Example

I hope you have Got What is auto increment serial number in jquery And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.