CSS реорганизация строк таблицы

Question

Я хочу переместить последнюю строку таблицы сверху и сдвинуть все остальные строки на одну.Я попробовал то, что работает для divs, но, к сожалению, оно не будет работать для строк таблицы.

HTML я использовал

.tablebodyclass tr {
  top: auto;
  bottom: 0px;
}

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

<table class="table">
  <tbody class="tablebodyclass">

    <tr class="no-stripe hidden" style="display: table-row;">
      <td class="align-right" colspan="3">bla bla1</td>
    </tr>
    <tr class="no-stripe hidden" style="display: table-row;">
      <td class="align-right" colspan="3">bla bla2</td>
    </tr>
    <tr class="no-stripe hidden" style="display: table-row;">
      <td class="align-right" colspan="3">bla bla3</td>
    </tr>
    <tr class="no-stripe hidden" style="display: table-row;">
      <td><strong>THIS needs to be first</strong> </td>
      <td class="align-right" colspan="2">xxxxxx
    </tr>
  </tbody>
</table>

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

любой намек на то, как переупорядочить строки таблицы, высоко оценен

- endo

Answer 1

Вы можете использовать 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/ а-руководство к Flexbox / )

Answer 2

Вы не можете изменить порядок строк только с помощью 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