table content are exceeding in Card - html

Question

Would like to ask if there is a solution for this. The table contents are exceeding in card. See screenshot below:
However, if I un-collapse the sidebar the view is fine. See screenshot below
Some of the page links are fine. some are not. Here is my code for td
#foreach($mfo as $row)
<tr style="font-size: 10.5pt;">
<td style="overflow-wrap: break-word;">{{$row->form_type}}</td>
<td style="overflow-wrap: break-word;">{{$row->dept_name}}</td>
<td style="overflow-wrap: break-word;">{{$row->function_name}}</td>
<td style="overflow-wrap: break-word;">{{$row->role}}</td>
<td style="overflow-wrap: break-word;">{!! $row->mfo_desc !!}</td>
<td style="overflow-wrap: break-word;">{!! $row->success_indicator_desc !!}</td>
<td>{!! $row->remarks !!}
<td>
Edit
<a href="#" class="btn btn-danger btn-sm"
data-mymfoid="{{$row->id}}" data-toggle="modal" data-target="#deletemfo">Delete</a>
</td>
</tr>
#endforeach

Answer 1

It's simply too much text in your table.
A wider screen could solve the issue (if you haven't got a max-width on the table or parent container).
If you can shorten the text in the table head that could help.
You might be able to decrease your font size as well.

Answer 2

Here is the solution on how I fixed it. However, I think it is not based on a good practice.
<table class="table table-striped" style="width: 100%; table-layout: fixed;">
<thead>
<tr>
<th style="width: 7%;">FORM TYPE</th>
<th style="width: 10%">DEPT NAME</th>
<th style="width: 13%;">FUNCTION NAME</th>
<th style="width: 10%;">ROLE NAME</th>
<th style="width: 20%">ORGANIZATIONAL OUTCOMES/KEY RESULTS AREA</th>
<th style="width: 20%">QUALITY + OBJECTIVES
(TARGETS + MEASURES)</th>
<th style="width: 20%">REMARKS</th>
<th style="width: 10%">ACTIONS</th>
</tr>
</thead>
<tbody>
#foreach($mfo as $row)
<tr style="font-size: 10.5pt;">
<td style="overflow-wrap: break-word;">{{$row->form_type}}</td>
<td style="overflow-wrap: break-word;">{{$row->dept_name}}</td>
<td style="overflow-wrap: break-word;">{{$row->function_name}}</td>
<td style="overflow-wrap: break-word;">{{$row->role}}</td>
<td style="overflow-wrap: break-word;">{!! $row->mfo_desc !!}</td>
<td style="overflow-wrap: break-word;">{!! $row->success_indicator_desc !!}</td>
<td>{!! $row->remarks !!}
<td>
Edit
<a href="#" class="btn btn-danger btn-sm"
data-mymfoid="{{$row->id}}" data-toggle="modal" data-target="#deletemfo">Delete</a>
</td>
</tr>
#endforeach
</tbody>
</table>
Notes:
In table class, I added a width=100%; table-layout: fixed;
Fixed width for each tag with a total of 110%