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


Demo Download

Today I will going to explain how to add automatic serial numbers and zebra striping in HTML table rows with CSS.

I will write simple HTML table code and i am leaving empty first <td> of every row, automatically generated serial number will use that empty <td>.

The HTML

<table class="css-serial">
<thead>
<tr>
 <th>Sr. No</th>
 <th>Employee Name</th>
 <th>Position</th>
</thead>
<tbody>
<!-- In every row 1st td is intentionally left blank for serial number -->
<tr>
 <td>&nbsp;</td>
 <td>Employee Name 1</td>
 <td>Position 1</td>
</tr>
<tr>
 <td>&nbsp;</td>
 <td>Employee Name 2</td>
 <td>Position 2</td>
</tr>
<tr>
 <td>&nbsp;</td>
 <td>Employee Name 3</td>
 <td>Position 3</td>
</tr>
<tr>
 <td>&nbsp;</td>
 <td>Employee Name 4</td>
 <td>Position 4</td>
</tr>
</tbody>
</table>

I want to apply this only above table so i give class to this table so that it works only for the above class table not all tables in web page.

The CSS

body {
 font-family: "Open Sans", helvetica, arial;
 }
table{
 width: 500px; /* For Responsive design set 100% */
 border-collapse: collapse;
 margin: 30px 0px 30px;
 background-color: #fff;
 font-size: 14px;
 }
table tr {
 height: 40px;
 }
table th {
 background: #333;
 color: #fff;
 font-weight: bold;
 font-size: 18px;
}
table td, th {
 padding: 6px 6px 6px 10px;
 border: 1px solid #ccc;
 text-align:center;
}
 
/* CSS3 Zebra Striping */
table tr:nth-of-type(odd) {
 background: #eee;
}
 
/* Automatic Serial Number Row */
.css-serial {
 counter-reset: serial-number; /* Set the serial number counter to 0 */
}
.css-serial td:first-child:before {
 counter-increment: serial-number; /* Increment the serial number counter */
 content: counter(serial-number); /* Display the counter */
}

If you find this tutorial helpful so share it with your friends and leave your comment.

Facebook Official Page: All PHP Tricks

Twitter Official Page: All PHP Tricks

Article By
Javed Ur Rehman is a passionate blogger and web developer, he loves to share web development tutorials and blogging tips. He usually writes about HTML, CSS, JavaScript, Jquery, Ajax, PHP and MySQL.
  1. Hi Javed Ur Rehman,
    It’s very helpful for me.
    Very very Thanks …
    You have any Magento blogs ?

Leave a Reply

Your email address will not be published. Required fields are marked *