Split html table after a certain number of columns

I'm using trying to figure out how split my table into sections rather than one long table that runs off the page. I'm trying to parse a CSV file and the amount of columns in the table is dependent on the file. From there I can map each column to the desired name and then import it. I am using Laravel and passing some variables into the view. I'd like the table to split every 4 columns or so. Here is what I have:

<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'm completely clueless as to how I would approach this and any help is much appreciated!

Example Table:

What is should look like if there are many columns:

1 answer

  • answered 2018-10-09 22:57 Gary Browne

    Rather than "split" the table I would suggest using bootstrap responsive tables

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

    Since the number of columns is an unknown, you're never going to know where/how often to split the table. With responsive tables, your table will be accessible at all resolutions.