JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<table class="rwdscroll-table">
					<tr>
						<th>Lorem</th>
						<th>Lipsum</th>
						<th>Dolor</th>
						<th>Sit Amet</th>
						<th>Consectetur</th>
					</tr>
					<tr>
						<td>consectetur</td>
						<td>adipiscing</td>
						<td>elit</td>
						<td><i class="icon-remove"></i></td>
						<td><i class="icon-eye-open"></i></td>
					</tr>
					<tr>
						<td>Nulla</td>
						<td>tempus</td>
						<td>adipiscing</td>
						<td><i class="icon-ok"></i></td>
						<td><i class="icon-eye-open"></i></td>
					</tr>
					<tr>
						<td>dui</td>
						<td>nec</td>
						<td>luctus</td>
						<td><i class="icon-remove"></i></td>
						<td></td>
					</tr>
</table>

CSS

table {
    border-collapse: collapse;
    border-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: #FFF;
    background: #228086
}
table tr {
    border-top: 1px solid #339994;
    border-bottom: 1px solid #339994;
    border-color: #40BFB9;
}
th {
    font-weight:bold;
    text-transform:uppercase;
}
td, th {
    display: table-cell;
    padding: 1em !important;
    margin: .5em 1em;
    text-align: left;
    border-right: 1px solid #339994;
}

td {
    text-align: center;
}

td i {
    text-align:center;
}