[Malleys]

Нужно начинать с исправления знаний о вложенных строках / таблицах.

Да, вы правы! Вы сами будете исправлять, или только другим советовать? (Другие-то уже разбираются, а вы до сих пор мучаетесь со строками таблицы, не понимая предназначение элемента <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>

Как видите, в браузере таблица работает именно так, как описано в спецификации!

по вашему разработчики, например, плагина tablesorter просто так решили несколько месяцев / лет назад взять и реализовать вложенные строки для своего детища зная о том, что внутри tr не может быть tr ? )

Ничего подобного никогда не было сделано — для группировки в разметке элементов <tr> используется <tbody>. Читайте спецификацию — там всё описано. И вы неожиданно поймёте всё, что касается таблиц!

Запомните — строки таблицы содержат ячейки.

не может быть вложенной table внутри table

Да, в разметке не возможно сделать так... И на самом деле вам не нужно, поскольку данные содержатся в ячейках. Такой селектор не подходит не под один элемент, описанный в разметке — table > table

Однако это есть и кто-то это практикует для своих задач. Тут та же ситуация. Поэтому говорить что это неправильно - некорректно. Вы же не знаете затеи, а потому.. )

Да, более правильней — невозможно! Как вы уже знаете — в разметке такое описать невозможно! А вы говорите о каких-то сомнительных практиках — вас просто обманули!

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>