invert table column with css

Question

 .market { width: 100%; } .market tbody tr { color: #555; border-bottom: 1px solid #1f2943; cursor: pointer; } table.market { transform: rotate(180deg); } table.market tr { transform: rotate(-180deg); }

 <table class="market"> <tbody> <tr> <td>6,53,500</td> <td>0.28368756</td> <td>74125.05</td> </tr> <tr> <td>5,53,500</td> <td>0.28368756</td> <td>74125.05</td> </tr> <tr> <td>5,53,500</td> <td>0.28368756</td> <td>74125.05</td> </tr> </tbody> </table>

Note: This working Fine but, when i use transform : rotate Table Row (tr) border removed or not working. I need first Column to last in table. I am trying to fix from many hours, tired now please help.

Answer 1

So you want to reverse the row ordering, right? Could you use flexbox , or do you need to support older browsers? Here's a solution using flexbox:

.market{
  width: 100%;
}

.market tbody {
  display: flex;
  flex-direction: column-reverse;
}

.market tbody tr {
  display: flex;
  flex-direction: row;
  color: #555;
  border-bottom: 1px solid #1f2943;
  cursor: pointer;
}

.market tbody td {
  flex: 1 1 auto;
}

And here's a jsFiddle

Answer 2

direction: rtl;

这将使用一行 CSS 反转表格！