содержимое таблицы в Карте превышает

Question

Хотел бы спросить, есть ли решение для этого. В карточке превышено содержание таблицы. См. Снимок экрана ниже:

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)
                 {{$ row-> form_type}}  {{$ row-> dept_name}}  {{$ row-> function_name}}  {{$ row-> role}}  {!! $ row-> mfo_des c !!}  {!! $ row-> success_indicator_des c !!}  {!! $ row-> примечания !!} id)}}" class="btn btn-secondary btn-sm" type="submit"> Изменить  id}}" data-toggle="modal" data-target="#deletemfo"> Удалить    @endforeach 

Answer 1

Вот решение, как я это исправил. Однако я думаю, что это не основано на хорошей практике.

<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>

Примечания:

1. В классе таблицы я добавил width = 100%; table-layout: fixed;
2. Фиксированная ширина для каждого тега в сумме 110%

Answer 2

В вашей таблице просто слишком много текста.

Более широкий экран может решить проблему (если у вас нет максимальной ширины таблицы или родительского контейнера).

Если вы можете сократить текст в заголовке таблицы, это может помочь.

Возможно, вы также сможете уменьшить размер шрифта.