table content are exceeding in Card

user_13150146 0
Viewed 50

Would like to ask if there is a solution for this. The table contents are exceeding in card. See screenshot below: enter image description here

However, if I un-collapse the sidebar the view is fine. See screenshot below

enter image description here

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>
                            <a href="{{action('MfoController@edit', $row->id)}}" class="btn btn-secondary btn-sm" type="submit">Edit</a>
                            <a href="#" class="btn btn-danger btn-sm"
                               data-mymfoid="{{$row->id}}" data-toggle="modal" data-target="#deletemfo">Delete</a>
                    </td>
                </tr>
            @endforeach
bootstrap-4 css html
2 Answers

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.

user_99963810

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>
                            <a href="{{action('MfoController@edit', $row->id)}}" class="btn btn-secondary btn-sm" type="submit">Edit</a>
                            <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:

  1. In table class, I added a width=100%; table-layout: fixed;
  2. Fixed width for each tag with a total of 110%
user_131501460
Related