JSFiddle - React, Tailwind, and code Playground

by Nikhil Mangal

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<table width="600" border="0" cellspacing="0" cellpadding="0" class="table">
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
    <th>Heading 4</th>
    <th>Heading 5</th>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
    <td>Five</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
    <td>Five</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
    <td>Five</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
    <td>Five</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
    <td>Five</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
    <td>Five</td>
  </tr>
</table>

CSS

.table
{
	font-family:"Arial Black", Gadget, sans-serif;
	border:solid 1px #eee;
	padding:5px;
	box-shadow:0px 0px 5px #ccc;
}
.table th
{
	background:#33c744;
	padding:10px;
	color:#fff;
	text-align:left;
}
.table td
{
	padding:10px;
	font-size:14px;
}
.border
{
	border-top:solid 1px #ccc;
	border-bottom:solid 1px #ccc;
}

JavaScript

$(document).ready(function() {
    $('.table tr:nth-child(2n)').css("background-color","#eeeeee");
	$('.table tr:nth-child(2n) td').addClass("border");
});