如何在响应视图的顶部使右对齐td？

Question

我的桌子右对齐为主标题。

<table style="height: 233px;" width="862">
  <tbody>
    <tr>
      <td>3 ليالي و4 أيام</td>
      <td class="need-this-on-top">
        <h2><strong>المدة </strong></h2>
      </td>
    </tr>
    <tr>
      <td>تيكادي , آليبي , كوشين</td>
      <td class="need-this-on-top">
        <h2><strong>اماكن للزيارة</strong></h2>
      </td>
    </tr>
  </tbody>
</table>

移动视图

我需要在顶部加粗的文字作为移动视图的标题。如何使用CSS做到这一点？ 我已经尝试过以下代码：

display: table-header-group;

有什么建议吗？

Answer 1

将弹性框与flex-direction: column一起使用，并更改顺序。

@media screen and (max-width: 767px) {
  .td-stacked-reversed-mobile tr {
    display: flex;
    flex-direction: column;
  }
  .td-stacked-reversed-mobile tr>td:nth-child(1) {
    order: 2;
  }
  .td-stacked-reversed-mobile tr>td:nth-child(2) {
    order: 1;
  }
}

<!-- Added class 'td-stacked-reversed-mobile' -->
<table class="td-stacked-reversed-mobile" style="height: 233px;" width="862">
  <tbody>
    <tr>
      <td>3 ليالي و4 أيام</td>
      <td class="need-this-on-top">
        <h2><strong>المدة </strong></h2>
      </td>
    </tr>
    <tr>
      <td>تيكادي , آليبي , كوشين</td>
      <td class="need-this-on-top">
        <h2><strong>اماكن للزيارة</strong></h2>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

希望对您有帮助

td {
 vertical-align:top
}