JSFiddle - React, Tailwind, and code Playground

by ihtus

HTML

<table style="table-layout:fixed; width:100%; white-space:normal; word-wrap: break-word;" class="alternatetable">
	<colgroup>
		<col style="min-width: 100px; max-width: 200px;">
		<col style="width:75px;">
		<col style="width:200px;">
		<col style="width:auto;">
		<col style="width:90px;">
	</colgroup>
	<tbody>
		<tr><th>DR# / Title</th><th>Status</th><th>Requestor</th><th>Program</th><th>Required</th></tr>
		<tr style="cursor:pointer; cursor:hand;">
			<td>DR-2013-0000<br>12121212</td>
			<td>RETURNED</td>
			<td>First Last Name</td>
			<td>Honda Civic</td>
			<td>Resubmit</td>
		</tr>
	</tbody>
</table>

CSS

.alternatetable {
	border-collapse: collapse;
	border: 1px;
}

.alternatetable td {
	/*border-collapse: collapse;*/
	border-bottom:	1px solid;
	border-bottom-color: #555555;
	padding:4px 4px 4px 4px;
}

.alternatetable tr.alt td {
	color:#aaaaaa;
	background-color:#eeeeee;
}

.alternatetable th {
	/*font-size: 1.1em;*/
	text-align:left;
	padding:8px 4px 8px 4px; /*top right bottom left*/
	background-color:#313131;
    color:#fff;
}

.alternatetable tr:hover {
	background-color:#325e74;
}