Can the top columns of a table be styled with column names in this manner? https://i.sstatic.net/rUbyA.png
This is the code snippet I am using:
<table class="" style="background: rgba(255,255,255,0.5); font-size:15px; border-collapse:separate;
border:solid yellow 3px;
border-radius:6px;
-moz-border-radius:6px;">
<thead>
<tr>
@if ($service->id == 13)
<th scope="col">PROJECT</th>
<th scope="col">Execution PERIOD</th>
<th scope="col">GLA(SQM)</th>
<th scope="col">Project Value</th>
<th scope="col">Project Functions</th>
@endif
</tr>
</thead>
@foreach ($data as $dataItem)
<tbody>
@if ($dataItem->service_id == $service->id)
<tr>
<th scope="row">{{ $dataItem->project }}</th>
<td>{{ $dataItem->execution_period }}</td>
<td>{{ $dataItem->SQM }}</td>
@if ($dataItem->project == 'Total')
<td style="font-weight:bold; color:green;">{{ $dataItem->project_value }}</td>
<td style="font-weight:bold; color:green;">{{ $dataItem->project_function }}</td>
@else
<td>{{ $dataItem->project_value }}</td>
<td>{{ $dataItem->project_function }}</td>
@endif
</tr>
@endif
</tbody>
@endforeach
</table>Is it achievable to implement what I have in mind or will it be complex? I'm unsure about how to approach this in CSS as I'm not very experienced with front-end development.