JSFiddle - React, Tailwind, and code Playground

HTML

<table id="chtable">
    <tr>
        <th class="colDir"><span class="dir">Dir</span>

            <br/><span class="sec pri">Pri</span>

        </th>
        <th class="colDate">Date
            <img src="arrow-up-b.png" style="vertical-align:-2px">
            <br/><span class="sec">Time <img src="arrow-up-b.png" style="vertical-align:-2px"></span>

        </th>
        <th class="colOrig">Origin
            <br/><span class="sec">Calling Number</span>

        </th>
        <th class="colDest">Destination
            <br/><span class="sec">Called Number</span>

        </th>
        <th class="colType">Type
            <br/><span class="sec loc">Loc</span>

        </th>
        <th class="colLen">Delay
            <br/><span class="sec">Len</span>

        </th>
    </tr>
    <!-- ext to zone, to op -->
    <tr>
        <td class="colDir">&gt;
            <br/><span class="sec pri">Low</span>

        </td>
        <td class="colDate">31/01/14
            <br/><span class="sec">04:26:14</span>

        </td>
        <td class="colOrig">aaaaa aaaaaaa aaaaaaaa aaaaa aaaaaa
            <br/><span class="sec">907734491345</span>

        </td>
        <td class="colDest">bbbb bbbbbb bbbb bb bbbbbb bbbbbb bbb
            <br/><span class="sec">753825</span>

        </td>
        <td class="colType">Voice
            <br/><span class="sec loc">Ext</span>

        </td>
        <td class="colLen">00:17
            <br/><span class="sec">00:29</span>

        </td>
        <!-- end_time-connect_time, connect_time-start_time -->
    </tr>
</table>

CSS

/* -- defaults -- */
 body, select, input {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
}
/* NB 14px Verdana ~= 16px Arial ~= 16px Tahoma */

/* main content */
#chtable, #chtable2 {
    width: 865px;
    /*height: 200px;*/
    border-spacing: 0;
    border-collapse: collapse;
}
#chtable th, #chtable td, #chtable2 th, #chtable2 td {
    border: 2px solid #cdcdcd;
    padding: 5px 3px;
    vertical-align: top;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#chtable .colDir {
    width:3%;
    text-align:center
}
#chtable .colDate {
    width:10%;
    text-align:center
}
#chtable .colOrig {
    width:34%
}
#chtable .colDest {
    width:34%
}
#chtable .colType {
    width:9%;
    text-align:center;
}
#chtable .colLen {
    width:10%;
    text-align:center
}
.chtable-header {
    width:854px;
    background: #4f4f4f;
    color:white;
    padding:5px;
    height:26px;
}
.chtable-footer {
    width:854px;
    background: #4f4f4f;
    color:white;
    padding:5px;
    height:26px;
}
.chtable-buttons {
    float:right;
}
.chtable-footer-button {
    float:left;
    padding:2px 10px 2px 10px;
    background:#eee;
    border:1px solid #999;
    color:black;
    font-weight:bold;
}
a {
    text-decoration: none;
}
.sec {
    /*font-size: 13px;*/
    color: #666;
}
/* hide dir title */
 .dir {
    display: none;
}
/* hide location - TODO only show internal */
 .loc {
    display: none;
}
/* hide priority - TODO row background color as per overview/main */
 .pri {
    display: none;
}