Code for Responsive Table with different color for odd and even row


Now smartphones are in everyone's hand. People watch website both from Laptop and Mobile. So, when a web developer creates Table, he or she should make it as responsive. Sometimes it is important to set different color for odd and even row that reader can read the table easily. But how to that? First see the sample:

Table Caption
Name Birth-date Gender Hobby
Dear 6 September 1983 Male Reading Books
Jack 1 July 1990 Male Gardening
Simran 25 August 1988 Female Travelling
Ashok 12 February 1980 Male Gardening


Here is the HTML5 Code for a table including common CSS


Now use the code from below to make this table responsive


Finally this is the code to make different color for odd and even row


Here is the full code for a "Responsive Table with different color for odd and even row"


BONUS: If you feel tired to convert old table to this format, then use this simple trick. It will not make old tables responsive, but this code will help readers to scroll.

Popular posts from this blog

Basic Math Calculator

Protect Wi-Fi from unauthorized people

🎸 Emoji

How to take Screenshot ?

Beautify JavaScript and jQuery Code