用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>

注意：此工作正常，但是当我使用transform时：旋转Table Row（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

Answer 2

direction: rtl;

这将用一行CSS反转一个表！