JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div id="NewsSummary" class="clearfix"></div>

CSS

body, html {
    margin: 0;
    padding: 0;
}
#NewsSummary {
    margin: 0 auto;
    border-bottom-color: #e5e5e5;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    color: #464a50;
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 12px;
    padding-bottom: 10px;
    text-align: left;
    width: 100%;
    height: auto;
    clear: both;
    line-height: 1.3em;
    overflow: hidden;
}
.clearfix:before, .clearfix:after {
    display: table;
    content:" ";
}
.clearfix:after {
    clear: both;
}
.spacers {
    border-bottom-color: #e5e5e5;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.tblNewsDate {
    color: #464a50;
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 12px;
    line-height: 1.3em;
}
.tblNewsLink, a:visited {
    color: #00539f;
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 12px;
    line-height: 1.3em;
}
.paginate {
    text-align: left;
    width: 100%;
    height: auto;
    clear: both;
    line-height: 1.3em;
    overflow: hidden;
}
/*
 * Table styles
 */
 table.dataTable {
    width: 100%;
    margin: 0 auto;
    clear: both;
    border-collapse: separate;
    border-spacing: 0;
    /*
   * Header and footer styles
   */
    /*
   * Body styles
   */
}
table.dataTable thead th, table.dataTable tfoot th {
    font-weight: bold;
}
table.dataTable thead th, table.dataTable thead td {
    padding: 10px 18px;
    border-bottom: 1px solid #111111;
}
table.dataTable thead th:active, table.dataTable thead td:active {
    outline: none;
}
table.dataTable tfoot th, table.dataTable tfoot td {
    padding: 10px 18px 6px 18px;
    border-top: 1px solid #111111;
}
table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting {
    cursor: pointer;
    *cursor: hand;
}
table.dataTable thead .sorting {
    background: url("../images/sort_both.png") no-repeat center right;
}
table.dataTable thead .sorting_asc {
    background:...

JavaScript

$(document).ready(function () {

    RenderHtmlOnSuccess();

});

function RenderHtmlOnSuccess() {

    var newsdata = new Array();
    newsdata.push("Wed May 21 00:00:00 EDT 2014#<a class=\"tblNewsLink\" href=\"/url/InternationalNews.aspx\">International News</a>");
    newsdata.push("Wed May 20 00:00:00 EDT 2014#<a class=\"tblNewsLink\" href=\"/url/News.aspx\"> News</a>");

    var html = '<table id="NewsSummaryGridView" class="dataTable"><thead><tr><th align="left">News</th></tr></thead><tbody>';
    for (var i = 0; i < newsdata.length; i++) {
        var newArray = newsdata[i].split('#');

        html += '<tr><td>';
        for (var j = 0; j < newArray.length; j++) {
            html += '<td>' + newArray[j] + '</td></tr>';
        }
        if (i < (newsdata.length - 1)) {
            html += '<tr><td class="spacers"> </td></tr> ';
        }
    }
    html += '</tbody></table>';

    $(html).appendTo('#NewsSummary');


    $("td:empty").remove();

    $('#NewsSummaryGridView tr').each(function () {
        if ($(this).find('td:first')) {
            $(this).css('color', '#464a50');
            $(this).css('text-align', 'left');
        }
    });

    $('#NewsSummaryGridView tr').each(function () {

        if ($(this).find('td:last')) {
            $(this).css('border-bottom-color', '#e5e5e5');
            $(this).css('border-bottom-style', 'solid');
            $(this).css('border-bottom-width', '1px');
        }
    });

 $('#NewsSummaryGridView').dataTable({
        "pagingType": "full_numbers"
    });

}