инвертировать столбец таблицы с помощью 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>

Примечание: это работает отлично, но, когда я использую преобразование: вращение границы строки таблицы (tr) удалено или не работает.Мне нужно, чтобы первый столбец длился в таблице.Я пытаюсь исправить с многих часов, устал, теперь, пожалуйста, помогите.

Answer 1

То есть вы хотите изменить порядок строк, верно?Не могли бы вы использовать flexbox или вам нужно поддерживать старые браузеры?Вот решение с использованием 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;
}

А вот jsFiddle