JSFiddle - React, Tailwind, and code Playground

HTML

<table>
	<thead>
		<tr>
			<th class="first">
				First
			</th>
			<th class="last">
				Last
			</th class="info">
			<th>
				Info
			</th class="join-date">
			<th>
				Join Date
			</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="first">
				<span>Don ovonMrLongNameIsMe!!!</span>
			</td>
			<td class="last">
				P
			</td>
			<td class="info">
				Here is some rando info that can vary in length. I talk a lot.
			</td>
			<td class="join-date">
				2013-03-01
			</td>
		</tr>
		<tr>
			<td class="first">
				Tom
			</td>
			<td class="last">
				Smith
			</td>
			<td class="info">
				I'm a quiet person.
			</td>
			<td class="join-date">
				<div>2013-04-222013-04-222013-04-222013-04-222013-04-222013-04-222013-04-222013-04-222013-04-22END!</div>
			</td>
		</tr>
	</tbody>
</table>

CSS

table {
			table-layout: fixed;
		}

		td {
			border: 1px solid rgb(0,0,0);
            width: 100px;
			overflow: hidden; /* why isn't this applied? */
		}