Как использовать зажим в таблицах данных, где разные столбцы используют разное количество строк - PullRequest
0 голосов
/ 02 апреля 2019

Я пытаюсь создать таблицу данных в формате html с 9 столбцами, которая заполнена AJAX. теперь для некоторого контента нужно использовать 2 строки в одной строке, и если они длиннее ширины столбца, их необходимо обрезать с помощью elipsis (...).

Другие столбцы должны использовать только одну строку, и если они длиннее ширины столбца, их также необходимо обрезать с помощью элипсиса. Наконец, есть третья категория столбцов, которую я не хочу обрезать вообще, а использую только одну строку (даты).

Я пытаюсь сделать это, используя два разных класса CCP, где один обрезает содержимое после одной строки, а другой использует две строки. Они работают сами по себе, но как только я попытаюсь реализовать их несколько раз в одном столбце, в результате браузер объединяет содержимое разных столбцов в одной ячейке. Могу ли я использовать зажим только один раз в одной таблице?

td {
    padding: 0.5rem;

    &.clamp {
        padding-bottom: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 2;
    }
}

td {
    padding: 0.5rem;

    &.clamp1 {
        padding-bottom: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 1;
    }

.td-nowrap {
white-space: nowrap;
}


@foreach (var al in Model.xxx.ToList()) {
<tr>
    <td class="clamp">@al.Naam</td>
    <td class="clamp">@al.nummer</td>
    <td class="clamp">@al.xxx</td>
    <td class="clamp1">@al.nummer2</td>
    <td>@al.Aantal</td>
    <td align="right">@al.Bxxx2("N", nf)</td>
    <td class="td-nowrap" data-sort="@al.doremi?.Ticks">@al?.doremi?.ToShortDateString()</td>
    <td class="td-nowrap" data-sort="@al.start?.Ticks">@al?.start?.ToShortDateString()</td>
    <td class="td-nowrap" data-sort="@al.end?.Ticks">@al?.end?.ToShortDateString()</td>
</tr>
}

Я ожидаю, что первые три колмуна будут использовать 2 строки, если у них длинное имя, а первый столбец будет использовать только одну строку и будет обрезан по ширине столбца. Но вместо этого он выбрасывает содержимое первых 4 столбцов в первом столбце

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