Цитата:
Сообщение от shareware
Нужно начинать с исправления знаний о вложенных строках / таблицах.
|
Да, вы правы! Вы сами будете исправлять, или только другим советовать? (Другие-то уже разбираются, а вы до сих пор мучаетесь со строками таблицы, не понимая предназначение элемента <tr> — строки таблицы содержат ячейки)
В спецификации HTML описано, как используются строки таблицы —
https://www.w3.org/TR/html52/tabular...the-tr-element
Проверяем... «хочу-хочу строчки таблички в другие строчки»
<table>
<tr>
<tr>
<td>В браузере, совместимым со спецификацией HTML, этот фон будет розовым (а не зелёным), поскольку строки таблицы могут содержать в разметке только ячейки!</td>
</tr>
</tr>
</table>
<style>
tr {
background: deeppink;
}
tr > tr {
background: yellowgreen;
}
</style>
Как видите, в браузере таблица работает именно так, как описано в спецификации!
Цитата:
Сообщение от shareware
по вашему разработчики, например, плагина tablesorter просто так решили несколько месяцев / лет назад взять и реализовать вложенные строки для своего детища зная о том, что внутри tr не может быть tr ? )
|
Ничего подобного никогда не было сделано — для группировки в разметке элементов <tr> используется <tbody>. Читайте спецификацию — там всё описано. И вы неожиданно поймёте всё, что касается таблиц!
Запомните — строки таблицы содержат ячейки.
Цитата:
Сообщение от shareware
не может быть вложенной table внутри table
|
Да, в разметке не возможно сделать так... И на самом деле вам не нужно, поскольку данные содержатся в ячейках. Такой селектор не подходит не под один элемент, описанный в разметке —
table > table
Цитата:
Сообщение от shareware
Однако это есть и кто-то это практикует для своих задач. Тут та же ситуация. Поэтому говорить что это неправильно - некорректно. Вы же не знаете затеи, а потому.. )
|
Да, более правильней — невозможно! Как вы уже знаете —
в разметке такое описать невозможно! А вы говорите о каких-то сомнительных практиках — вас просто обманули!
shareware, у вас в таблице три столбца, но согласно использованию ячеек в вашем примере — вам следует добавить ещё один столбец! Для перемещения строк с определённым классом вы можете использовать СSS-свойство order. Например так...
<table>
<thead>
<th>ID</th>
<th>Имя</th>
<th>Фамилия</th>
<th>premium</th>
</thead>
<tbody>
<tr class="not">
<td>1</td>
<td>Антоша</td>
<td>Антоша</td>
<td>Ne</td>
</tr>
<tr class="premium">
<td>2</td>
<td>Серега</td>
<td>Кочегарин</td>
<td>premium</td>
</tr>
<tr class="not">
<td>3</td>
<td>Саня</td>
<td>Жопин</td>
<td>Ne</td>
</tr>
<tr class="premium">
<td>4</td>
<td>Ваня</td>
<td>Жлобин</td>
<td>premium</td>
</tr>
</tbody>
</table>
<style>
table {
border-collapse: collapse;
}
tbody {
display: grid;
}
tr {
display: grid;
grid-template-columns: 3em 1fr 1fr 1fr;
}
tr.premium {
order: -1;
}
/* пример раскраски */
table {
border: 1px solid black;
}
tbody {
background: linear-gradient(to bottom, #f1f1f1 50%, #fff 0) 0 0 / 100% 4em;
}
tr {
height: 2em;
align-items: center;
}
td, th {
padding: 0 1em;
}
td:first-child, td:last-child {
text-align: center;
}
</style>
