Table header's inline styles

I am struggling to write CSS rules to take care of my column widths. I finally narrowed it down to my selectors getting there, but the inline properties are overriding it. Below shows my attempts.

I can resize the actual data display just fine, its the header that I'm having issues with (which is already loaded in the table within a thead item).

My initialization:

$('#example').DataTable( {
      'bAutoWidth': false,
      'oLanguage': {
        'sEmptyTable': 'No enties found'
      },
      'aaData': data,
      'aoColumnDefs': [
        {'sWidth': '', 'aTargets': [0,1,2,3] }
      ],
      'aoColumns': [
        {'mData': 'PROPERTY_1'},
        {'mData': 'PROPERTY_2'},
        {'mData': 'PROPERTY_3'},
        {'mData': 'PROPERTY_4'},
      ]
    } );

My css:

/** First th and first column of the Example page **/
#example_wrapper .dataTables_scrollHead table th:first-child, 
#example td:first-child {
  overflow:hidden;
  width: 10%;
  background-color:#000000 !important;
}
/** Second th and second column of the Example page **/ 
#example_wrapper table th:first-child+th {width:70% !important;}
#example_wrapper table td:first-child+td {
  overflow:hidden;
  width: 70%;
}
/** Third th and third column of the Example page **/
#example_wrapper .dataTables_scrollHead table th:first-child+th+th{width:10%;} 
#example td:first-child+td+td {
  overflow:hidden;
  width: 10%;
}
/** Fourth th and fourth column of the Example page **/
#example_wrapper .dataTables_scrollHead table th:first-child+th+th+th, 
#example td:first-child+td+td+td {
  overflow:hidden;
  width: 10%;
}