DataTables js Как уменьшить ширину всей таблицы - PullRequest
Новая
       6

DataTables js Как уменьшить ширину всей таблицы

0 голосов
/ 29 мая 2020

Я использую DataTables с источником данных AJAX, по умолчанию много столбцов, поэтому страницу автоматически нужно будет прокручивать вправо.

Ниже изображение:

enter image description here

Интересно, есть ли способ уменьшить ширину всей таблицы вручную, возможно, используя CSS?

Я попытался сделать следующее: 

<section id="ticket-table-container">
    <table id="tickets-table" class="display" style="width:100%">
        <thead>
            <tr>
                <th>CustomerCompanyName</th>
                <th>CustomerContactName</th>
                <th>CustomerId</th>
                <th>CustomerRegion</th>
                <th>ID</th>
                <th>LastUpdatedBy</th>
                <th>LastUpdatedTime</th>
                <th>Product</th>
                <th>Subject</th>
                <th>TicketChannel</th>
                <th>TicketCreated</th>
                <th>TicketSLAExpiry</th>
                <th>TicketSeverity</th>
                <th>TicketStatus</th>
                <th>TicketType</th>
            </tr>
        </thead>
    </table>
</section>

Поместив таблицу внутри section и вручную изменив ширину section. Однако это не помогает.

Я знаю, что могу указать responsive с помощью этого кода ниже: 

  $(document).ready(function () {
            $("#tickets-table").DataTable({
                "responsive": true,
                "processing": true,
                "serverSide": true,

Однако мне интересно, можно ли не использовать responsive и каким-то образом просто вручную изменить ширину, чтобы ширина таблицы уменьшена, чтобы страницу не нужно было прокручивать вправо?

1 Ответ

0 голосов
/ 01 июня 2020

Вы говорите, что ваша таблица должна растягиваться до доступного пространства в родительском контейнере, когда вы выполняете style="width:100%" в своем теге <table>. Удалите его, чтобы таблица занимала необходимое пространство.

Также избегайте встроенного стиля CSS, HTML следует использовать для структуры и семанти c, а CSS - для представления.

...