JSFiddle - React, Tailwind, and code Playground

by Aruna Perera

HTML

<!-- Table goes in the document BODY -->
<table class="gridtable">
<tr>
	<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
	<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
    <tr>
	<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>

CSS

table.gridtable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #ff9e44;
	border-collapse: collapse;
}
table.gridtable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
    border-color: #ff9e44;
	background-color: #ffd0a5;
}
table.gridtable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
    border-color: #ff9e44;
	background-color: #ffffff;
}
table.gridtable > tbody > tr:nth-child(odd) > td {
    background-color: #fff1e5;
}