Таблицы строк таблицы CSS

Question

Можно ли изменить порядок строк таблицы только с помощью CSS?

<table> 
    <tr></tr> <!-- order 2--> 
    <tr></tr> <!-- order 3--> 
    <tr></tr> <!-- order 1--> 
</table> 

Answer 1

Вы можете попробовать переназначения их с различными значениями display. Обратите внимание, что это может повлиять на общее поведение таблицы.

<table> 
 
    <tr style="display:table-row-group;"><td>2</td></tr> <!-- order 2--> 
 
    <tr style="display:table-footer-group;"><td>3</td></tr> <!-- order 3--> 
 
    <tr style="display:table-header-group;"><td>1</td></tr> <!-- order 1--> 
 
</table>

Answer 2

Вы можете сделать класс в CSS и применить преобразование исподволь, как показано ниже

.reverseOrder{ 
-webkit-transform: rotate(180deg) 
-moz-transofrm: rotate(180deg) 

} 

Answer 3

Немного сложнее, но она работает под всеми браузерами, у вас нет для создания каждого тэга тэга и работает для неограниченного числа тр-тегов:

td { 
    position: relative; 
    top: 20px; 
    height: 20px; 
} 

tr:last-child td { 
    position: absolute; 
    top: 0px; 
} 

table { 
    position: relative 
} 

https://jsfiddle.net/n526e0fy/

(мы не можем применить «позиция: относительная» Тг, именно поэтому я применил на тд, см HTML <tr> tag and position:relative)

Answer 4

Вы можете перемещать строки с трансформациями. Но если вы хотите, чтобы двигаться более чем один, это может быть трудно регулировать

tr { 
 
    background-color: lightblue; 
 
    transform: translateY(22px); 
 
} 
 

 
tr:last-child { 
 
    transform: translateY(-44px); 
 
    
 
}

<table> 
 
    <tr><td>TWO</td></tr> <!-- order 2--> 
 
    <tr><td>THREE</td></tr> <!-- order 3--> 
 
    <tr><td>ONE</td></tr> <!-- order 1--> 
 
</table>