如何限制div层内foreach的输出行数 仅显示7行避免页面布局变形

你可以通过三种方式实现固定展示7行的需求，按推荐优先级排序如下：

1. 后端直接截断输出（最优方案） #

你使用的是Laravel Blade模板，直接限制遍历的数据源长度即可，不会渲染多余DOM，也不会出现布局错乱问题：

• 方式1：在Blade遍历处直接截取前7条，修改@foreach代码即可：

{{-- 仅遍历前7条数据 --}}
@foreach ($servicios->take(7) as $servicio)

• 方式2：在控制器返回数据时直接限制数量，减少不必要的数据传输：

// 控制器中查询时直接取前7条
$servicios = Servicio::latest()->take(7)->get();

2. CSS限制展示高度 #

如果不想修改后端逻辑，可以通过CSS固定表格内容区域高度，超过7行时滚动或者隐藏：

/* 假设单行行高为40px，可根据实际样式调整数值 */
.widget-table-two .table tbody {
    display: block;
    max-height: calc(7 * 40px);
    overflow-y: auto; /* 超过7行时展示滚动条，需要隐藏的话改为hidden */
}
.widget-table-two .table thead, 
.widget-table-two .table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed; /* 保证表头和内容列宽对齐 */
}

3. 分页实现 #

如果需要用户查看全部数据，可以用Laravel自带的分页功能，每页固定展示7条：

1. 控制器中修改查询逻辑，使用分页方法：

// 每页返回7条数据
$servicios = Servicio::latest()->paginate(7);

2. 在表格下方插入分页渲染代码：

</table>
{{-- 分页导航 --}}
<div class="pagination-wrapper">
    {{ $servicios->links() }}
</div>

注意：你之前出现无限输出行的核心原因是foreach会遍历$servicios集合的所有元素，没有限制数量，优先用后端截断的方式处理成本最低，也不会有样式兼容问题。

内容的提问来源于stack exchange，提问作者user13523236