JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" width="100%" cellspacing="0">
            <thead>
                <tr>
                  <th scope="col">Balls</th>
                  <th scope="col">Nutz</th>
                  <th scope="col">Balls</th>
                  <th scope="col">Nutz</th>
                  <th scope="col">Nutter Butter Sandwich</th>
                </tr>
            </thead>
          <tbody>
            <tr>
              <td class="table-solution-name">
              	<h2>EEA Pricing Module</h2>
                <ul>
                    <li>Created: 05-07-2015 4:57:23 PM</li>
                    <li>ID: 62ba863e-cd0a-4253-8965-2a44cf5a5587</li>
                    <li>Last Deployment: RESEARCH :: TESTING 05-07-2015 8:06:18 AM</li>
                </ul>
              </td>
              <td><a href="#">Run Test</a></td>
              <td>
              	<h3>Test passed</h3>
              	<p>Tested 412,446 test cases with no errors.</p>
              </td>
              <td class="action-table-column">
              	<ul>
                    <li><a href="#">Score</a></li>
                    <li><a href="#">Edit</a></li>
                    <li><a href="#">Delete</a></li>
                </ul>
              </td>
              <td class="action-table-column">
                  <p>X</p>
              </td>
            </tr>
   

          </tbody>
        </table>

CSS

body {
	font-family: Arial;
	color: #776b67;		
}

.dataTables_wrapper .dataTables_filter {
	margin-bottom: 16px;
}

table.dataTable thead{
	text-align: left;
	background: #a09d9b;
	color: #fff;
	font-size: 15px;
}

table.dataTable thead th, table.dataTable thead td {
	padding: 10px 10px;
}

table.dataTable tbody tr {
	background-color: #fbfafa;
}

tr.odd, table.dataTable.display tbody tr.odd {
	background-color: #ece8e8;
}

table.dataTable thead th, table.dataTable thead td {
	border-bottom: solid 4px #2fbb9a;	
}

table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
	background-color: #f7f6f6;
}

table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
	background-color: #fdfdfd;
}

table.dataTable td {
	border-left: solid 1px #c8c6c5;
	border-top: solid 1px #c8c6c5;	
}

table.dataTable td:last-child {
	border-right: solid 1px #c8c6c5;
}

table.dataTable tfoot th, table.dataTable tfoot td {
	border-top: solid 1px #c8c6c5;	
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	box-sizing: border-box;
	display: inline-block;
	min-width: inherit;
	padding: 5px 13px;
	margin-left: 2px;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	color: #2cae8f !important;
	border: 1px solid #80bfaf;
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(241,252,249,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(241,252,249,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,252,249,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,252,249,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1)...

JavaScript

$(document).ready(function() {
		$('#example').DataTable( {
		'scrollX': true
		} );

	} );