JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
    
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>

<table id="table">
  <thead>
    <tr>
      <th>a</th> 
      <th>b</th> 
      <th>c</th> 
    </tr>
  </thead>
 </table>

CSS

table.dataTable {
	border-top:1px solid #D60026;
	table-layout:fixed; 
	background:#FFFFFF;	
  
  width:auto !important;
  
}

table.dataTable thead th{  
  background-color:#E6E6E6;   
}

table.dataTable thead td{  
  background-color:#FFFFFF;   
}

table.dataTable th, table.dataTable td{
  border:1px solid #CCCCCC;  
  
  overflow:hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}

JavaScript

$(document).ready(function() {
	$('#table').DataTable( {	
  		autoWidth		: false,
      data				: [{"a" : "11111111111111111111111111111111111111111111111111", "b" : "2", "c" : "3"}],
      paging	 		: false,													
				deferRender		: true,
        columns			: [
		       					{ data  : "a", 
                      width	: "30px",		       					  
		       					},
                    { data : "b",
                      width : "100px"                    
		       					},
                    { data : "c",
                      width : "200px"
                    }]
        
    });
  });