在一定数量的列之后拆分html表答案

【问题标题】：Split html table after a certain number of columns在一定数量的列之后拆分html表
【发布时间】：2018-10-09 16:20:23
【问题描述】：

我正在尝试弄清楚如何将我的表格拆分为多个部分，而不是一张长长的表格超出页面。我正在尝试解析 CSV 文件，表中的列数取决于文件。从那里我可以将每一列映射到所需的名称，然后导入它。我正在使用 Laravel 并将一些变量传递到视图中。我希望表格每隔 4 列左右拆分一次。这是我所拥有的：

<table class="table table-hover">
    @if(isset($header_fields))
        <thead class='thead-dark'>
            <tr>
                @foreach ($header_fields as $key => $value)
                    <div class="col-lg-3">
                        <th>{{$value}}</th>
                    </div>
                @endforeach
            </tr>
        </thead>
    @endif
    <tbody>
        @foreach ($sampledata as $row)
            <tr>
                @foreach ($row as $key => $value)
                    <td>{{$value}}</td>
                @endforeach
            </tr>
        @endforeach
    </tbody>
        <tr>
            @foreach ($data[0] as $key => $value)
                <td>
                    <select class="form-control" id='sel' name="fields[{{$key}}]">
                        <option value="Skip">----------</option>
                        @if(isset($header_fields))
                            @foreach ($header_fields as $field)
                                <option value="{{$field}}" @if ($value === $field) @endif>{{$field}}</option>
                            @endforeach
                        @endif
                        <option value="First Name">First Name</option>
                        <option value="Middle Name">Middle Name</option>
                        <option value="Last Name">Last Name</option>
                        <option value="Address1">Address1</option>
                        <option value="Address2">Address2</option>
                        <option value="City">City</option>
                        <option value="State">State</option>
                        <option value="Zip">Zip</option>
                        <option value="Zip4">Zip4</option>
                        <option value="SSI_Keycode">SSI_Keycode</option>
                    </select>
                </td>
            @endforeach
    </tr>
</table>

我完全不知道如何处理这个问题，非常感谢任何帮助！

示例表：

如果有很多列应该是什么样子：

【问题讨论】：

I'd like the table to split every 4 columns 我不确定我是否理解。 table 的外观如何？
不知道为什么在将所有内容写入之前关闭</tbody>
我上传了两张图片，希望能澄清我的意思
嗨，您想在显示多行后创建一个全新的表吗？我理解正确吗？
如果有很多字段，我想确保我的表格不会超出页面。如果可以通过制作一个新表来做到这一点，那就太好了。

标签： php laravel html-table split

【解决方案1】：

我建议使用bootstrap responsive tables而不是“拆分”表格

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

由于列数是未知数，您永远不会知道在何处/多久拆分一次表格。使用响应式表格，您的表格可以在所有分辨率下访问。

【讨论】：