JSFiddle - React, Tailwind, and code Playground

by Mayank Sharma

HTML

<table class="TFtable" border="1">
		<tr>
			<th >Heading1</th>
			<th >Heading2</th>
			<th >Heading3</th>
		</tr>
		<tr>
			<td>Text jshdf hjkhsdk jhfkhds fkjhf sdjkh dsfkjh</td>
			<td >Text</td>
			<td >Text</td>
		</tr>
		<tr>
			<td>Text</td>
			<td>Text</td>
			<td>Text</td>
		</tr>
		<tr>
			<td>Text</td>
			 <td>Text</td>
			<td>Text</td>
		</tr>
	</table>

CSS

.TFtable {
	width: 50%;
	border-collapse: collapse;
	table-layout: fixed;
}

.TFtable tr {
	padding: 7px;
	border: #4e95f4 1px solid;
}

/* provide some minimal visual accomodation for IE8 and below */
.TFtable tr {
	background: #FFFFFF;
}

/*  Define the background color for all the ODD background rows  */
.TFtable tr:nth-child(odd) {
	background: #FFFFFF;
}

/*  Define the background color for all the EVEN background rows  */
.TFtable tr:nth-child(even) {
	background: #BCCECE;
}

.TFtable td{
table-layout: fixed;
width: 20px;
height:auto;
overflow: auto;
}