Как настроить датируемые заголовки в соответствии с шириной столбца? - PullRequest
0 голосов
/ 09 ноября 2018

Я использую таблицы данных jQuery для проекта, и у меня возникает следующая проблема:

При первой загрузке столбцы заголовка и строки данных хорошо выровнены.Однако при изменении размера окна клетки тела уменьшаются или растут, тогда как ячейки заголовка остаются постоянной ширины.Результатом является неправильное выравнивание строк заголовка и тела.Следующий код используется для инициализации таблицы данных:

$el.DataTable({
    paging: true,
    lengthChange: true,
    searching: true,
    ordering: true,
    info: true,
    autoWidth: false,
    pageLength: 25,
    columns: getColumns(configurationObject),
    scrollX: true,
    language: localizationObject,
    data: getDataset(configurationObject),
    dom: 'lrtip',
    lengthMenu: [
        [10, 25, 50, 100, -1],
        [10, 25, 50, 100, localizationObject['allRows']]
    ]
});

И HTML-код выглядит следующим образом:

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Code</th>
            <th>Description</th>
        </tr>
    </thead>
</table>

В своем стремлении решить эту проблему я попытался сделать следующее:

  • Установить autoWidth в true / false
  • Включить / отключить адаптивный плагин

Многие ответы вращаются вокруг создаваемой таблицы до того, как dom будет завершензагрузка или внутри скрытого div, предотвращающего вычисление ширины.Ни то, ни другое не подходит для меня.Приведенный выше код вызывается в $(document).ready(function () {}} и не скрывается при вызове (как я уже говорил, начальная загрузка работает нормально, но я подумал, что стоит упомянуть).

В своем исследовании я заметил, что дляВ строке заголовка создается совершенно новая HTML-таблица.Ячейки этого ряда также имеют фиксированную ширину.Это объясняет мне несоответствие, но я не приблизился к фактическому решению рассматриваемой проблемы.

Я пытаюсь достичь любого из двух сценариев:

  • Столбцытело имеет фиксированную ширину, и горизонтальная прокрутка вступит во владение, если таблица переполнится.Я установил для scrollX значение true, и на небольших экранах это работает очень хорошо.
  • Столбцы строки заголовка имеют не фиксированную ширину, а ширину столбцов тела.

Надеюсь, я предоставил достаточно информации, чтобы кто-нибудь нашел ответ, потому что я погуглил, посмотрел и не могу его найти.Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...