卡片中的表格内容超过答案

【问题标题】：table content are exceeding in Card卡片中的表格内容超过
【发布时间】：2020-08-05 12:54:38
【问题描述】：

想问问有没有办法解决这个问题。表格内容超出卡中。请看下面的截图：

但是，如果我取消折叠侧边栏，则视图很好。请看下面的截图

一些页面链接很好。有些不是。这是我的 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

【问题讨论】：

你应该在桌子上使用overflow-y: auto;，让我知道它是否适合你。

标签： html css bootstrap-4

【解决方案1】：

您的表格中的文字太多了。

更宽的屏幕可以解决这个问题（如果您在表格或父容器上没有最大宽度）。

如果您可以缩短表头中的文本会有所帮助。

您也可以减小字体大小。

【讨论】：

【解决方案2】：

这是我如何修复它的解决方案。但是，我认为这不是基于良好的做法。

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

注意事项：

在表格类中，我添加了一个width=100%；表格布局：固定；
每个标签的固定宽度总共为 110%

【讨论】：