Разделить HTML-таблицу после определенного количества столбцов - PullRequest
Новая
       13

Разделить HTML-таблицу после определенного количества столбцов

0 голосов
/ 09 октября 2018

Я пытаюсь выяснить, как разбить мою таблицу на разделы, а не на одну длинную таблицу, которая убегает со страницы.Я пытаюсь проанализировать файл 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>

Я совершенно не знаю, как бы я подошел к этому, и любая помощь очень ценится!

Пример таблицы:

Как должно выглядеть, если столбцов много:

1 Ответ

0 голосов
/ 10 октября 2018

Вместо того, чтобы "разбивать" таблицу, я бы предложил использовать загрузочные таблицы, реагирующие на загрузку 

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

Поскольку число столбцов неизвестно, вы никогда не узнаете, где /как часто делить стол.Благодаря адаптивным таблицам ваша таблица будет доступна во всех разрешениях.

...