logo
  • Home
  • About
  • Services
  • Portfolio
  • Contact Us
  • Submit Guest post
Auto Increment Serial Number in HTML Table without JQuery (Only CSS)

Auto Increment Serial Number in HTML Table without JQuery

February 1, 2017 No comments Article SEO Website Designing

Auto increment serial number in html table without jquery: Hi Friends, Today I will tell you about how to auto increment the serial number in the table without using any JavaScript or its library. As we know for incrementing anything we need to use javascript, jquery or any other language but we can do the increment work with the help of CSS.

You can use counter-reset, counter-increment property to increase the value of any number and also add some content before and after the number value.

If you use any javascript it increase our page speed as well as loading time of our website. For increasing the count, you can use CSS.

 

Auto Increment Serial Number in HTML Table without JQuery (Only CSS):

You can see the live demo and download the code from below.

SEO Website Designing Live Demo      SEO Website Designing Download



Auto Increment Serial Number in HTML Table with CSS:

For increasing the count you can follow some steps. These steps are

Step1:

Open your code editor.

Step2:

Paste the below code to increase the value of a number.

HTML Code:

In the below example I have made a table in which first td is blank and in the other table td we can put data.

<table class="table table-hover table-bordered table-striped">
    <thead>
      <tr>
        <th>S.no</th>
        <th>Name</th>
        <th>Job Title</th>
        <th>Address</th>
        <th>Contact Email</th>
        <th>Phone</th>
        <th>Operation</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td>Anna</td>
        <td>Software Engineer</td>
        <td>Tilak Nagar, Delhi, india 122001</td>
        <td>Anna@softwareengineer.com</td>
        <td>09898989898</td>
        <td><button class="btn btn-primary">Edit</button><button class="btn btn-primary" style="margin-left:5px;">Delete</button></td>
      </tr>
      <tr>
        <td></td>
        <td>Anna</td>
        <td>Software Engineer</td>
        <td>Tilak Nagar, Delhi, india 122001</td>
        <td>Anna@softwareengineer.com</td>
        <td>09898989898</td>
        <td><button class="btn btn-primary">Edit</button><button class="btn btn-primary" style="margin-left:5px;">Delete</button></td>
      </tr>
      <tr>
        <td></td>
        <td>Anna</td>
        <td>Software Engineer</td>
        <td>Tilak Nagar, Delhi, india 122001</td>
        <td>Anna@softwareengineer.com</td>
        <td>09898989898</td>
        <td><button class="btn btn-primary">Edit</button><button class="btn btn-primary" style="margin-left:5px;">Delete</button></td>
      </tr>
    </tbody>
  </table>

<table class="table table-hover table-bordered table-striped"> <thead> <tr> <th>S.no</th> <th>Name</th> <th>Job Title</th> <th>Address</th> <th>Contact Email</th> <th>Phone</th> <th>Operation</th> </tr> </thead> <tbody> <tr> <td></td> <td>Anna</td> <td>Software Engineer</td> <td>Tilak Nagar, Delhi, india 122001</td> <td>Anna@softwareengineer.com</td> <td>09898989898</td> <td><button class="btn btn-primary">Edit</button><button class="btn btn-primary" style="margin-left:5px;">Delete</button></td> </tr> <tr> <td></td> <td>Anna</td> <td>Software Engineer</td> <td>Tilak Nagar, Delhi, india 122001</td> <td>Anna@softwareengineer.com</td> <td>09898989898</td> <td><button class="btn btn-primary">Edit</button><button class="btn btn-primary" style="margin-left:5px;">Delete</button></td> </tr> <tr> <td></td> <td>Anna</td> <td>Software Engineer</td> <td>Tilak Nagar, Delhi, india 122001</td> <td>Anna@softwareengineer.com</td> <td>09898989898</td> <td><button class="btn btn-primary">Edit</button><button class="btn btn-primary" style="margin-left:5px;">Delete</button></td> </tr> </tbody> </table>


CSS Code:

In this example, first I have reset the counter, increment the counter and display the counter value in the first td. You can also add some content before and after the number.

body
{
    counter-reset: Count-Value;     
}
table
{
    border-collapse: separate;
}
tr td:first-child:before
{
  counter-increment: Count-Value;   
  content: "Row:" counter(Count-Value);
}

body { counter-reset: Count-Value; } table { border-collapse: separate; } tr td:first-child:before { counter-increment: Count-Value; content: "Row:" counter(Count-Value); }

For any problem you can see the live demo and download the code from below.

SEO Website Designing Live Demo      SEO Website Designing Download

Now you know about How To Get Auto Increment Serial Number in HTML Table with CSS Only

Read About Other Interesting Things about jquery below.

  • Sliding Div When Scroll Down Page Using Jquery
  • Disable Mouse Right Click Using Jquery
  • Responsive Jquery Read More Feature Without Plugin
  • Marquee Animation Without Marquee tag
  • Add 3D Menu Effects To Your Website Using Jquery
  • Rumbles, Vibrates, Shakes, And Rotates Any Element Using Jquery Plugin
  • Fancy Effects To Input Fields Using Jquery Plugin
  • Add Diwali Fireworks Using Jquery In Your Website
  • Zoom Image On Hover Using CSS Without Jquery
  • Pure HTML CSS Slider Without JavaScript or Jquery
  • Create Country State And City Dropdown Using Jquery
  • Learn JQUERY Code Step By Step For Beginners
  • Create Expand Collapse Sliding Menu Using jQuery
  • Jquery Me Simple Slider Kaise Bnate Hai
  • Add CKEditor in Html Form using Jquery
  • Avoid Spammers With Motion CAPTCHA Using JQuery
  • Stop Double Form Submission Using Jquery and Ajax
  • Simple Text Slider Using Jquery Slide Function

I hope you will like Auto Increment Serial Number in HTML Table without JQuery. If You found it useful please subscribe my blog.

Share this:

  • Tweet
  • Telegram
  • WhatsApp
  • Share on Tumblr
  • Pocket
  • Email

Related

Categories: Website Design

Tags: auto increment number in html, Auto Increment Row number, Auto Increment Row number with CSS only, Auto Increment Serial Number in HTML Table without JQuery, CSS auto increment number, How to get Automatic Serial number column in the HTML Table

Leave a Reply Cancel reply

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 1,504 other subscribers

Categories

  • Angular (1)
  • Content Marketing (2)
  • Email Marketing (3)
  • Graphics Design (3)
  • Keyword Strategy (1)
  • Other (3)
  • Search Engine Optimization (10)
  • Social Media Optimization (4)
  • Website Design (67)
  • WordPress (18)
  • Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,504 other subscribers

  • Tag Cloud

    Add Social Share button in WordPress without Plugins Bootstrap center div on screen with flexbox center div vertically and horizontally in body center div vertically and horizontally responsive Center Elements Vertically And Horizontally Using Flex Centering in CSS Create Your Own Fast Social Sharing Buttons For WordPress Creating Scroll-based Animations using jQuery and CSS3 CSS CSS3 CSS3 Variables CSS custom properties CSS Variables custom share buttons wordpress Disable Mouse Right Click Using Jquery disable right click with jquery Disabling right mouse click menu facebook Get to Know the CSS Object Fit and Position Properties How Can You Use CSS Variables HOW TO CODE A RESPONSIVE EMAILER OR NEWSLETTER How to Create Social Sharing Button without any Plugin HOW TO DESIGN A RESPONSIVE EMAILER OR NEWSLETTER how to disable right click menu in html page How to prevent Right Click option using jquery How to Restore WordPress Website from Backup Manually How to use CSS Variables HTML HTML5 javascript jquery jQuery make div slide in when scrolling down page Know About CSS Object Fit and Position Properties Meta Tags Mysql object-fit object-fit/object-position object-position Responsive Website Sliding Div When Scroll Down Page Using Jquery Vertical Centering - Solved by Flexbox Webpage Scrolling Animation Effects with CSS3 & jQuery What You Need To Know About CSS Variables wordpress
  • Copyright SEO Website Designing 2015

    loading Cancel
    Post was not sent - check your email addresses!
    Email check failed, please try again
    Sorry, your blog cannot share posts by email.