Question

我想将表格的最后一行移至顶部，并将所有其他行向下移。我尝试了适用于div的方法，但不幸的是，它不适用于表行。

我使用的HTML

services.AddCustomDefaultIdentity<User>
(
    o => { /* options e.g */ o.Password.RequireDigit = true;}
)
.AddSignInManager()
.AddEntityFrameworkStores<Context>();

services.ConfigureApplicationCookie(options =>
{
    options.AccessDeniedPath = "some_value";
    options.Cookie.Name = "some_value";
    options.Cookie.HttpOnly = some_value;
    options.ExpireTimeSpan = TimeSpan.FromMinutes(some_value);
    options.LoginPath = "some_value";
    options.LogoutPath = "some_value";
    options.ReturnUrlParameter = CookieAuthenticationDefaults.some_value;
    options.SlidingExpiration = some_value;
});

.tablebodyclass tr {
  top: auto;
  bottom: 0px;
}

.tablebodyclass tr:last-of-type {
  top: 0px;
  bottom: auto;
}

https://jsfiddle.net/3ow0mrvy/1/

高度赞赏如何重新排列表格行的任何提示

-endo

Answer 1

仅使用CSS不能对行进行重新排序。 jQuery或flexbox可以帮助您。但是，要使用纯CSS模仿此效果，您可以在第一行添加一个边距，然后将最后一行设置为position: absolute以使其出现在顶部：

.tablebodyclass tr {
  top: auto;
  bottom: 0px;
}

.tablebodyclass tr:last-of-type {
  top: 0px;
  bottom: auto;
}

tr:last-of-type {
  position: absolute;
}

tr:first-of-type {
  margin-top: 14px;
}

<table class="table table-condensed table-hover table-vertical-middle table-shop table-stack-phone">
  <tbody class="tablebodyclass">
    <tr class="no-stripe hidden" style="display: block;">
      <td class="align-right" colspan="3">bla bla1</td>
    </tr>
    <tr class="no-stripe hidden" style="display: block;">
      <td class="align-right" colspan="3">bla bla2</td>
    </tr>
    <tr class="no-stripe hidden" style="display: block;">
      <td class="align-right" colspan="3">bla bla3</td>
    </tr>
    <tr class="no-stripe hidden" style="display: block;">
      <td><strong>THIS needs to be first</strong> </td>
      <td class="align-right" colspan="2">xxxxxx
    </tr>
  </tbody>
</table>

JSFiddle

Answer 2

您可以使用flex和order来实现所需的功能。

tbody tr{

  display: block;
  border: 1px solid red;
}

<table class="table table-condensed table-hover table-vertical-middle table-shop table-stack-phone">                                    

<tbody class="tablebodyclass" style="display: flex; flex-direction: column;">

<tr class="no-stripe hidden" style="order: 2;">
  <td class="align-right" colspan="3">bla bla1</td>
</tr>

<tr class="no-stripe hidden" style="order: 3;">
  <td class="align-right" colspan="3">bla bla2</td>
</tr>

<tr class="no-stripe hidden" style="order: 4;" >
  <td class="align-right" colspan="3">bla bla3</td>
</tr>
        
<tr class="no-stripe hidden" style="order: 1;">
  <td><strong>THIS needs to be first</strong> </td>
  <td class="align-right" colspan="2">xxxxxx
</tr>             
</tbody>    
</table>

要了解有关flex的工作原理的更多信息，请查看这篇[精彩文章]。（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）

CSS表行重组

2 个答案: