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