TH in Semantic Datatable inside tab width is not set - css

Question

How to make tag is width to 100% in Semantic css with datatable inside tab.
Currently I have 3 tab with 1 datatable each, width is only set on Tab1 but not in Tab2 and Tab3
Here is my code: 1. HTML
<div class="ui top attached tabular menu">
<a data-toggle="tab" class="item active" data-tab="first">Other Hardwares Relation</a>
<a data-toggle="tab" class="item" data-tab="second">Software and License Relation</a>
<a data-toggle="tab" class="item" data-tab="third">Document Relation</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
<table class="ui celled table display nowrap" style="width:100%" datatable>
...
</table>
</div>
<div class="ui bottom attached tab segment" data-tab="second">
<table class="ui celled table display nowrap" style="width:100%" datatable>
<thead>
<tr>
<th>No.</th>
<th>Software #</th>
...
</tr>
</thead>
<tbody>
#foreach ($softwares as $index=>$software)
<tr>
<td>{{ $index+1 }}</td>
<td>{{$software->code}}</td>
...
</tr>
#endforeach
</tbody>
</table>
</div>
<div class="ui bottom attached tab segment" data-tab="third">
<table class="ui celled table display nowrap" style="width:100%" datatable>
...
</table>
</div>
</div>
and 2. JS
<script>
$(document).ready(function() {
$('[datatable]').DataTable({
"scrollX": true,
"paging": false,
"searching": false,
dom: 'Bfrtip',
buttons: [ ... ]
});
$('.menu .item').tab();
});
</script>

Answer 1

The best practice in Datatables is instead of bringing your data with foreach you should try datatables builtin ajax. I've faced same problem and solved by turning my data form to json with and made an ajax call.
PHP JSON Encode;
$object = (object) $arr;
echo json_encode($object);
Datatables Ajax Form;
var table = $('#example').DataTable({
fixedHeader: true,
"initComplete": function(){
$('.ui.loader').remove();
)
},
ajax: {
url: 'api/yourhandler.php',
type: 'GET',
data: {
searchTerm:searchTerm,
'pane':paneno,
project: projectFilter
},
},
order: [[ 0, "desc" ], [ 5, "asc" ]],
columnDefs: [
{ "searchable": true, "targets": [0,1,2,3,4,5] },
{ "className": "align-center", "targets": [0,2,3,4,5,6,7,8,9] },
{ "width": "1%", "targets": [2,3,4,5,6,7] },
{ "width": "10%", "targets": [8] },
{ "width": "25%", "targets": [1,9] }
],
columns: [
{ data: "columndata1" },
{ data: "columndata2" },
{ data: "columndata3" },
{ data: "columndata4" }
],
responsive: true,
paging: true,
pageLength: 25
});
If you choose not to make an ajax, I could say your problem cause is your data is not fit with the table. Try to focus your foreach, you will see the problem.