JSFiddle - React, Tailwind, and code Playground
HTML
<div class="data">
<table cellpadding="0" cellspacing="0">
<thead>
<tr class="colheaders">
<th> </th>
<th><a>Revenue</a></th>
<th><a>Orders</a></th>
<th><a>Conversion Rate</a></th>
<th><a>URL</a></th>
<th><a>Impressions</a></th>
<th><a>Clicks</a></th>
<th><a>Cost</a></th>
<th><a>Avg Position</a></th>
<th><a>CTR</a></th>
<th><a>Active KW</a></th>
<th><a>KW Added</a></th>
<th><a>AOV</a></th>
<th><a>Revenue</a></th>
<th><a>Orders</a></th>
<th><a>Conversion Rate</a></th>
<th><a>Profit</a></th>
<th><a>Impressions</a></th>
<th><a>Clicks</a></th>
<th><a>Cost</a></th>
<th><a>Avg Position</a></th>
<th><a>CTR</a></th>
<th><a>Active KW</a></th>
<th><a>KW Added</a></th>
<th><a>AOV</a></th>
</tr>
</thead>
<tbody>
<tr>
<td><span>02/15/10-02/21/10</span></td>
<td><span>$314,744.33</span></td>
<td><span>4,022</span></td>
<td><span>5.41%</span></td>
<td><span>http://i56.tinypic.com/2prejbm.jpg</span></td>
<td><span>5,270,435</span></td>
<td><span>74,371</span></td>
<td><span>$22,071.40</span></td>
<td><span>4.70</span></td>
...
CSS
@import url(http://reset5.googlecode.com/hg/reset.min.css);
html { -webkit-font-smoothing: antialiased; }
body {
background: rgb(240,240,240);
font: 12px/16px Helvetica;
padding: 10px; }
.data {
-webkit-box-shadow: -1px 0 0 rgb(220,220,220), 0 1px 0 rgb(220,220,220), inset -1px 0 0 rgb(220,220,220);
background: white;
overflow-x: auto; }
table {
width: 100%; }
table th,
table td {
-webkit-box-shadow: inset -1px 0 0 rgb(220,220,220), inset 0 1px 0 rgb(220,220,220);
text-align: left; }
table th a,
table td span {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
min-width: 100%;
overflow: hidden;
padding: 3px 5px;
text-align: left; }
table th {
font-weight: bold;
vertical-align: bottom; }
table td span {
white-space: nowrap; }
table th:nth-child(5),
table td:nth-child(5) {
width: 1px; }
table th:nth-child(5) a,
table td:nth-child(5) span {
background: rgb(180,180,180);
min-width: 40px;
text-overflow: ellipsis; }
@media all and (max-width: 500px) {
table th:nth-child(5) a,
table td:nth-child(5) span {
max-width: 100px; }
}